State QML Type

Defines configurations of objects and properties More...

• List of all members, including inherited members

Properties

• changes : list<Change>
• extend : string
• name : string
• when : bool

Detailed Description

A state is a set of batched changes from the default configuration.

All items have a default state that defines the default configuration of objects and property values. New states can be defined by adding State items to the states property to allow items to switch between different configurations. These configurations can, for example, be used to apply different sets of property values or execute different scripts.

The following example displays a single Rectangle. In the default state, the rectangle is colored black. In the "clicked" state, a PropertyChanges object changes the rectangle's color to red. Clicking within the MouseArea toggles the rectangle's state between the default state and the "clicked" state, thus toggling the color of the rectangle between black and red.

  import QtQuick 2.0

  Rectangle {
      id: myRect
      width: 100; height: 100
      color: "black"

      MouseArea {
          id: mouseArea
          anchors.fill: parent
          onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
      }

      states: [
          State {
              name: "clicked"
              PropertyChanges { target: myRect; color: "red" }
          }
      ]
  }

Notice the default state is referred to using an empty string ("").

States are commonly used together with Transitions to provide animations when state changes occur.

Note: Setting the state of an object from within another state of the same object is not allowed.

See also States example, Qt Quick States, Transitions, and Qt QML.

Property Documentation

  Rectangle {
      id: myRect
      width: 100; height: 100
      color: "red"

      MouseArea { id: mouseArea; anchors.fill: parent }

      states: State {
          name: "hidden"; when: mouseArea.pressed
          PropertyChanges { target: myRect; opacity: 0 }
      }
  }

  Item {
      states: [
          State { name: "state1"; when: sharedCondition },
          State { name: "state2"; when: sharedCondition }
      ]
      // ...
  }