首页 文章

QML mousearea布局

提问于
浏览 次
0

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

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

该图像具有属性 fillMode: Image.PreserveAspectFit ，这允许在调整窗口大小时图像很好地缩放 .

现在，为了捕获事件，我在箭头顶部设置了一些MouseAreas . 虽然它们没有与窗口调整大小一起正确调整大小，但这些行为很好 . 这就是我尝试的任何布局，MouseAreas不会停留在箭头之上（这对用户来说显然是无用的） .

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

enter image description here

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

enter image description here

我尝试使用锚点选项设置我的布局 . 然后我尝试手动计算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的行为 .

---------UPDATE---------

我添加了example file以显示我的意思 . 我希望白色矩形与蓝色箭头一起移动和调整大小（因此白色矩形总是在左侧蓝色箭头上） .

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

亲切的问候，

安托万 .

layout qml qtquick2 qtquickcontrols

1 回答

  • 1

    我认为出现问题是因为渲染图像在 Image 项边界内的实际位置随着父图像大小的变化而变化 . 如果你用自己喜欢的编辑器打开图像并用例如填充背景，你可以看到我的意思 . 红色 .

    你可以通过使用 Item 做自己的方面来解决这个问题，但我认为你接近这个方式有点倒退 . 图像中应该是交互式的每个"shape"都应该有自己的PNG文件，然后用其中几个组成一个场景 . 这样，您可以在 Image 上设置 MouseArea 设置 anchors.fill ，而不必担心实际渲染图像的位置 . 您可以创建一个包含 Image 和 MouseArea 组合的可重用 MyButton.qml ，然后根据需要创建它的实例 . 作为奖励，它们会更加灵活，因为您可以轻松应用，例如按下/悬停效果给他们 .

    您仍然可能希望使用与您现在正在进行的相同类型的缩放来定位这些图像 .

    回复于

相关问题