states.qml Example File
animation/states/states.qml
import QtQuick 2.0
Rectangle {
id: page
width: 640; height: 480
color: "#343434"
Image {
id: userIcon
x: topLeftRect.x; y: topLeftRect.y
source: "qt-logo.png"
}
Rectangle {
id: topLeftRect
anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
width: 46; height: 54
color: "Transparent"; border.color: "Gray"; radius: 6
MouseArea { anchors.fill: parent; onClicked: page.state = '' }
}
Rectangle {
id: middleRightRect
anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
width: 46; height: 54
color: "Transparent"; border.color: "Gray"; radius: 6
MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
}
Rectangle {
id: bottomLeftRect
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
width: 46; height: 54
color: "Transparent"; border.color: "Gray"; radius: 6
MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
}
states: [
State {
name: "middleRight"
PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
},
State {
name: "bottomLeft"
PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
}
]
}