Qt Quick States#

Creating and setting states

Creating States#

To create a state, add a State object to the item’s states property, which holds a list of states for that item.

A warning signal component may have two states, the NORMAL and the 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 should be red and the flag is up. We may model the states using the State type and the color and flag configurations with the PropertyChanges type.

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    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"}

The PropertyChanges type will change the values of object properties. Objects are referenced through their id. Objects outside the component are also referenced using the id property, exemplified by the property change to the external flag object.

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:

The Default State#

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.

The `` when``


For convenience, the State type has a when property that can bind to expressions to change the state whenever the bound expression evaluates to true. The 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!"}

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

Animating State Changes#

State changes induce abrupt value changes. The Transition type allow smoother changes during state changes. In transitions, animations and interpolation behaviors are definable. The Animation and Transitions article has more information about creating state animations.

The Animation example demonstrates how to declare a basic set of states and apply animated transitions between them.

Using Qt Quick Behaviors with States explains a common problem when using Behaviors to animate state changes.

State Fast Forwarding#

In order for Transition to correctly animate state changes, it is sometimes necessary for the engine to fast forward and rewind a state (that is, internally set and unset the state) before it is finally applied. The process is as follows:

  1. The state is fast forwarded to determine the complete set of end values.

  2. The state is rewound.

  3. The state is fully applied, with transitions.

In some cases this may cause unintended behavior. For example, a state that changes a view’s model or a Loader’s sourceComponent will set these properties multiple times (to apply, rewind, and then reapply), which can be relatively expensive.

State fast forwarding should be considered an implementation detail, and may change in later versions.