![]() |
Home · All Classes · All Functions · Overviews |
QML states typically describe user interface configurations, including:
A state can also be thought of as a set of batched changes from a default configuration.
Examples of states in modern UI:
In QML:
Here is an example of using states. In the default state myRect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. Clicking within the mouse region changes the state from the default state to the 'moved' state, thus moving the rectangle.
Item {
id: myItem
Rectangle {
id: myRect
width: 100
height: 100
color: "red"
}
states: [
State {
name: "moved"
PropertyChanges {
target: myRect
x: 50
y: 50
}
}
]
MouseArea {
anchors.fill: parent
onClicked: myItem.state = 'moved'
}
}
State changes can be animated using Transitions.
For example, adding this code to the above Item {} element animates the transition to the "moved" state:
transitions: [
Transition {
NumberAnimation { properties: "x,y"; duration: 500 }
}
]
See Transitions for more information.
Other things you can do in a state change:
| Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) | Trademarks | Qt 4.7.0 |