QML 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 element and the color and flag configurations with the PropertyChanges element.

 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 element 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 element, 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"
             else
                 signal.state = "NORMAL"
         }
     }
 }

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

• Run some script using StateChangeScript
• Override an existing signal handler for an object using PropertyChanges
• Re-parent an Item using ParentChange
• Modify anchor values using AnchorChanges

 Rectangle {
     id: bell
     width: 75; height: 75
     color: "yellow"

     states: State {
                 name: "RINGING"
                 when: (signal.state == "CRITICAL")
                 PropertyChanges {target: speaker; play: "RING!"}
             }
 }