Clear QML anchor

Question

I have a MouseArea that I want to start off centered and then have an absolute position once the up/down/left/right keys are pressed. My problem is that I don't know how to clear the anchor on the MouseArea so that I can specify an absolute position:

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             }         }     } } 

At first I just tried setting mouseArea.anchors to undefined but got an error about anchors being a read-only property. I then discovered AnchorChanges, but I can't find a way to remove/clear the anchor; setting anchors.bottom etc. to undefined doesn't work.

Answer 1

According to docs, setting an anchor attribute to undefined should work. I don't quite get why AnchorChanges did not allow to set anchors.centerIn, but you can workaround it in your moveMouseArea function:

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; }