QML 自定义布局

Question

我正在使用 QML 显示背景图像，该图像需要用图标覆盖。这些项目中的每一个都附加了一个 MouseArea，因此图标实际上用作按钮。

现在图标需要随着背景图片一起缩放和移动。它们的布局行为需要使图标看起来像是背景图像的一部分（我没有将图标包含在背景图像中，因为图标 "active" 并且与 MouseArea 相关联）。

我得到的行为是图标与背景图像很好地缩放（当调整图像大小时，图标会相应地重新缩放）这很好。不幸的是，图标的位置 x / y 不正确，我没有管理找到 x / y 的公式，这样图标会随着背景调整大小一起移动，给人一种图标是背景图像一部分的感觉.

这是我当前的代码：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3

Rectangle
{
    color: palette.grey

    // Manual move background and buttons.
    Image
    {
        id: robotBody
        fillMode: Image.PreserveAspectFit
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
        height: parent.height * 0.8
        source: "../UI/Pictures/ManualMove_body.png"
        smooth: true

        // Buttons.
        Image
        {
            id: xFrontButton
            fillMode: Image.PreserveAspectFit
            source: "../UI/Icons/ManualMove_XFront.png"
            smooth: true
            x: 0.8 * parent.paintedWidth
            y: 0.8 * parent.paintedHeight
            transformOrigin: Item.TopLeft
            width: implicitWidth * robotBody.paintedWidth / robotBody.implicitWidth
            // NOTE: no need to specify the height because of the preserve aspect ratio fill mode.

            MouseArea
            {
                id: xFrontMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onPressed: { uiController.onXFrontMouseAreaPressed() }
                onReleased: { uiController.onXFrontMouseAreaReleased() }
            }
        }
    }

}

知道哪里出了问题吗？

谢谢，

安托万。

Answer 1

不要忘记这一刻：

x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth
y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight

即这样做：

import QtQuick 2.0
//import QtQuick.Controls 2.0
//import QtQuick.Controls.Styles 1.4
//import QtQuick.Controls.Material 2.0
//import QtQuick.Layouts 1.3

Rectangle
{
//    color: palette.grey
    color: "grey"

    // Manual move background and buttons.
    Image
    {
        id: robotBody
        fillMode: Image.PreserveAspectFit
        anchors.top: parent.top
        anchors.topMargin: 10
//        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
        height: parent.height * 0.8
//        source: "../UI/Pictures/ManualMove_body.png"
        source: "Large.png"
        smooth: true

        // Buttons.
        Image
        {
            id: xFrontButton
            fillMode: Image.PreserveAspectFit
//            source: "../UI/Icons/ManualMove_XFront.png"
            source: "small.png"
            smooth: true
            x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth
            y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight
//            transformOrigin: Item.TopLeft
            width: implicitWidth * robotBody.paintedWidth / robotBody.implicitWidth
            // NOTE: no need to specify the height because of the preserve aspect ratio fill mode.

            MouseArea
            {
                id: xFrontMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: console.log("Heya!")
//                onPressed: { uiController.onXFrontMouseAreaPressed() }
//                onReleased: { uiController.onXFrontMouseAreaReleased() }
            }
        }
    }
}

来自俄罗斯的欢呼:)

QML 自定义布局

QML custom layout

qt

layout

qml

qtquick2

qt-quick