Using States







Many user interface designs are state driven ; interfaces have configurations that differ depending on the current state. For example, a traffic signal will configure its flags or lights depending on its state. While in the signal's stop state, a red light will turn on while the yellow and the green lights will turn off. In the caution state, the yellow light is on while the other lights are turned off.

In QML, states are a set of property configurations defined in a State type. Different configurations could, for example:

  • Show some UI components and hide others
  • Present different available actions to the user
  • Start, stop, or pause animations
  • Execute some script required in the new state
  • Change a property value for a particular item
  • Show a different view or screen

所有 Item -based objects have a state property if they are the root element in a .qml file. You can specify additional states by adding new State objects to the item's states property. Each state within a component has a unique name , an empty string being the default. To change the current state of an item, set the state property to the name of the state.


要创建状态,添加 State 对象到项的 states 特性,其保持该项的状态列表。

A warning signal component may have two states, the NORMAL CRITICAL state. Suppose that in the NORMAL state, the color of the signal should be green and the warning flag is down . Meanwhile, in the CRITICAL state, the color 应该为 red and the flag is up . We may model the states using the State type and the color and flag configurations with the PropertyChanges 类型。

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"
    Flag { id: flag }
    states: [
        State {
            name: "NORMAL"
            PropertyChanges { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: flag; state: "FLAG_UP"}

PropertyChanges type will change the values of object properties. Objects are referenced through their id .

Further, the state may change by assigning the state property with the appropriate signal state. A state switch could be in a MouseArea type, assigning a different state whenever the signal receives a mouse click.

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
                signal.state = "NORMAL"

The State type is not limited to performing modifications on property values. It can also:


Every Item based component has a state property and a default state . The default state is the empty string ( "" ) and contains all of an item's initial property values. The default state is useful for managing property values before state changes. Setting the state property to an empty string will load the default state.

注意: Contrary to Qt Quick, the default state is not special. It is not updated to be a snapshot of the components current properties and bindings when changing to a named state. For more information see Default state limitations

when 特性

For convenience, the State 类型拥有 when property that can bind to expressions to change the state whenever the bound expression evaluates to true when property will revert the state back to the default state when the expression evaluates to false.

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"
    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {target: speaker; play: "RING!"}

bell component will change to the RINGING state whenever the signal.state is CRITICAL .


State changes induce abrupt value changes. The Transition type allows smoother changes during state changes. In transitions, animations and interpolation behaviors are definable. The 动画和过渡 article has more information about creating state animations.