Очистить якорь QML

У меня есть 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 не работает.

Ответ 1

Согласно docs, установка атрибута привязки 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;
}

Ответ 2

Спасибо за помощь. Я обнаружил, что установка undefined в рамках состояния работает (если по работам вы имеете в виду только то, что он не дает ошибок), однако, как только элемент переходит в другое состояние, якоря волшебным образом (и очень разочаровывающим) возвращаются. Это произойдет EVEN, если вы установите все якоря undefined в конечном состоянии. Однако, как указано выше, установка функции undefined в функции перед изменением состояния отлично работает. В моем случае, я установил его в моей мыши, в onPressed.

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

Я обнаружил, что нет необходимости упоминать якорь в onReleased, только следующее состояние. onReleased: { plotWindow04Frame.state = "drop" }

Кроме того, я должен упомянуть, что в последнем "отброшенном" состоянии не упоминаются также привязки, просто непрозрачность.

    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), когда пользователь их бросает)

Хорошо, что прямоугольники "заглавные" сначала привязаны к нижней части графического интерфейса, но как только пользователь их подбирает, они могут помещать их туда, где они захотят.