清除 QML 锚点

Question

我有一个 MouseArea，希望一开始它处于中心位置，然后在按下上下左右键后具有绝对位置。我的问题是不知道如何清除 MouseArea 上的锚定，以便可以指定绝对位置：

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id: screen
    width: 360
    height: 360
    visible: true

    Rectangle {
        anchors.fill: parent

        states: [
            State {
                name: "moved"
                AnchorChanges {
                    target: mouseArea
                    anchors.bottom: undefined
                    anchors.left: undefined
                    anchors.right: undefined
                    anchors.top: undefined
                }
            }
        ]

        MouseArea {
            id: mouseArea
            anchors.centerIn: parent
            width: 250
            height: 250
            focus: true
            onClicked: console.log("clicked!")
            onPositionChanged: console.log("position changed!")

            function moveMouseArea(x, y) {
                mouseArea.x += x;
                mouseArea.y += y;
                mouseArea.state = "moved";
                mouseAreaPosText.text = 'Mouse area was moved... new pos: '
                    + mouseArea.x + ', ' + mouseArea.y;
            }

            Keys.onPressed: {
                if (event.key === Qt.Key_Up)
                    moveMouseArea(0, -1);
                if (event.key === Qt.Key_Down)
                    moveMouseArea(0, 1);
                if (event.key === Qt.Key_Left)
                    moveMouseArea(-1, 0);
                if (event.key === Qt.Key_Right)
                    moveMouseArea(1, 0);
            }

            Rectangle {
                anchors.fill: parent
                border.width: 2
                border.color: "black"
                color: "transparent"
            }

            Text {
                id: mouseAreaPosText
                anchors.centerIn: parent
            }
        }
    }
}

我最初尝试将mouseArea.anchors设置为undefined，但收到了有关anchors是只读属性的错误。然后我发现了AnchorChanges，但我找不到清除锚点的方法；将anchors.bottom等设置为undefined没有效果。

- Mitch

---

文档 (http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html) 中提到： "如果您想从基于锚点的定位更改为绝对定位，则可以通过将其设置为 undefined 来清除锚定值"。 - sergk

Answer 1

根据文档，将锚属性设置为undefined应该是有效的。我不太明白为什么 AnchorChanges 不允许设置 anchors.centerIn，但你可以在你的 moveMouseArea 函数中绕过它：

function moveMouseArea(x, y) {
    mouseArea.anchors.centerIn = undefined; // <-- reset anchor before state change
    mouseArea.pos.x += x;
    mouseArea.pos.y += y;
    mouseArea.state = "moved";
    mouseAreaPosText.text = 'Mouse area was moved... new pos: '
        + mouseArea.pos.x + ', ' + mouseArea.pos.y;
}

- sergk

Answer 2

谢谢你们的帮助。我发现在状态中设置未定义可以解决问题（如果你的意思是它不会出错），但是一旦元素移动到另一个状态，锚点就会神奇地（而且非常令人沮丧地）返回。即使在最终状态中设置所有锚点为未定义，这种情况仍然会发生。如上所述，在更改状态之前的函数中设置未定义非常有效。在我的情况下，我在onPressed中的mouseArea中设置了它。

                onPressed: {
                plotWindow04Frame.anchors.bottom = undefined
                plotWindow04Frame.anchors.left = undefined
                plotWindow04Frame.state = "inDrag"
            }

我发现在onReleased中提及锚点并不是必要的，只需要提及下一个状态。 onReleased: { plotWindow04Frame.state = "dropped" }

另外，我应该提到，最终的“dropped”状态也没有提及锚点，只有透明度。

    states: [
    State {
        name: "inDrag"
        PropertyChanges {
            target: plotWindow04Frame
            opacity: .5
        }
    },
    State {
        name: "dropped"
        PropertyChanges {
            target: plotWindow04Frame
            opacity: 1
        }
    }

 ]

    transitions: Transition {
        NumberAnimation { properties: "opacity"; duration:200 }
    }
}

这里的想法是，当用户拖动时，这些绘图窗口会变成半透明（不透明度：0.5），但在用户放下它们时会恢复为不透明（不透明度：1）。

好处在于，绘图窗口的“矩形”最初被锚定在GUI底部，但一旦用户拿起它们，他们可以将它们放在任何地方。

- ultramanjones