![]() |
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 |