anchored.qml

anchored.qml:

import QtQuick 2.10
import QtQuick.Window 2.10

Window {
    id: window

    visible: true

    minimumWidth: 300
    minimumHeight: 300

    Rectangle {
        id: movingRect

        x: 10; y: 10
        width: 150; height: 150

        color: "red"

        MouseArea {
            anchors.fill: parent

            onClicked: {
                if (movingRect.state === "") {
                    movingRect.state = "anchored";
                } else {
                    movingRect.state = "";
                }
            }
        }

        states: State {
            name: "anchored"

            AnchorChanges {
                target: movingRect
                anchors {
                    right: contentItem.right
                    bottom: contentItem.bottom
                }
            }

            PropertyChanges {
                target: movingRect
                anchors {
                    rightMargin: 10
                    bottomMargin: 10
                }
            }
        }

        transitions: Transition {
            AnchorAnimation {
                duration: 1000
            }
        }
    }
}

Rectangle をクリックすると Rectangle にアンカーを付けて右下に配置し、もう一度クリックするとアンカーを削除している。AnchorChanges ではマージン指定をできないので PropertyChanges で指定している。