QML鼠标区域布局

Question

我目前正在 QML/QtQuick 中设置 QUI 应用程序。

我的 GUI 由包含 png 图像的页面组成。此图像显示了用户应按下以触发某些应用程序行为（即向上/向下/向左/向右）的箭头。

图像有属性 fillMode: Image.PreserveAspectFit 这允许图像在调整 window 大小时很好地缩放。

现在为了捕获事件，我在箭头顶部设置了一些 MouseAreas。这些行为很好，尽管它们不能与 window 一起正确调整大小。那就是我尝试过的任何布局摆弄，MouseAreas 不会停留在箭头的顶部（这显然对用户没有用）。

在下图中，您可以看到设计的布局，png 图像显示车辆和箭头（它们是由于按下时移动车辆），MouseAreas 正确覆盖箭头。

在图像上，我们可以看到 window 调整大小后的布局。 png 图像已正确调整大小（考虑到保留的方面和所有方面），但 MouseAreas 未正确移动和调整大小，因此它们不再覆盖箭头。

我已尝试使用锚点选项设置布局。然后我尝试手动计算 MouseAreas 的 x、y、宽度和高度（请参见下面的示例代码），但没有任何效果。

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 600
    height: 600
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle1
        anchors.fill: parent
        color: "#222222"

        Image {
            id: backBack
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: "ManualMove_allButBackgroundAndCore.png"
            smooth: true

            MouseArea {
                id: z_up
                x: 483 / backBack.implicitWidth * backBack.width
                y: 222 / backBack.implicitHeight * backBack.height
                width: 100
                height: 120
                hoverEnabled: true
                onPressed: {
                    console.log("z_up pressed width.")
                }
                onReleased: {
                    console.log("z_up released.")
                }
            }

            Rectangle {
                id: rectangle2
                x: 483 / backBack.implicitWidth * backBack.width
                y: 222 / backBack.implicitHeight * backBack.height
                width: 100
                height: 120
                color: "#ffffff"
            }
        }
    }
}

矩形允许在运行应用程序时可视化 MouseArea 的行为。

--------更新---------

我添加了一个 example file 来说明我的意思。我希望白色矩形与蓝色箭头一起移动和调整大小（因此白色矩形始终位于左侧蓝色箭头上）。

知道如何正确调整布局大小吗？

亲切的问候，

安托万。

Answer 1

我认为问题的发生是因为渲染图像在 Image 项目边界内的实际位置随着其父项大小的变化而变化。如果你用你最喜欢的编辑器打开图像并用例如填充背景，你就会明白我的意思。红色.

您可以通过 Item 自己处理方面问题来解决这个问题，但我认为您处理这个问题的方式有点倒退。图片中每个 "shape" 应该是交互式的都应该有自己单独的 PNG 文件，然后用其中的几个文件组成一个场景。这样，您只需在 Image 上设置 MouseArea 设置 anchors.fill，而不必担心实际渲染图像的位置。您可以制作一个包含 Image 和 MouseArea 组合的可重用 MyButton.qml，然后根据需要创建它的实例。作为奖励，它们将更加灵活，因为您可以轻松申请，例如press/hover 对他们的影响。

您可能仍然希望使用与现在相同的缩放比例来定位这些图像。

QML鼠标区域布局

QML mousearea layout

layout

qml

qtquick2

qtquickcontrols