import QtQuick Window { id: root width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle { id: main property alias moveTrg: mover property alias clickCount: mouse.clickCount color: "red" anchors.fill: parent state: "leftState" MouseArea { id: mouse property int clickCount: 0 anchors.fill: parent onClicked: { clickCount++ switch ( clickCount % 3 ) { case 1 : main.state = "middleState" break case 2 : main.state = "rightState" break default : main.state = "leftState" } console.log( `mouse!: ${main.clickCount}: ${main.state}` ) } } Rectangle { id: mover width: main.width / 4 color: "blue" anchors { left: undefined right: undefined horizontalCenter: undefined top: main.top bottom: main.bottom } } states: [ State { name: "leftState" AnchorChanges { target: mover anchors.left: main.left anchors.right: undefined anchors.horizontalCenter: undefined } }, State { name: "middleState" AnchorChanges { target: mover anchors { left: undefined right: undefined horizontalCenter: main.horizontalCenter } } }, State { name: "rightState" AnchorChanges { target: mover anchors { left: undefined right: main.right horizontalCenter: undefined } } } ] } }