Home · All Classes · All Functions · Overviews

QML States

Overview

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:

States in QML

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