Qt Quick 狀態

AnchorChanges	指定如何按狀態改變項錨點
ParentChange	指定如何在狀態改變時重設項父級
PropertyChanges	描述狀態的新特性綁定或值
State	定義對象和特性的配置
StateChangeScript	指定如何按狀態運行腳本
StateGroup	為非項類型提供內置狀態支持

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, 狀態 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, and can specify additional states by adding new 狀態 objects to the item's states property. Each state within a component has a unique 名稱 , an empty string being the default. To change the current state of an item, set the state property to the name of the state.

非項對象可以使用狀態透過 StateGroup 類型。

創建狀態

要創建狀態，添加 State 對象到項的 states 特性，其保持該項的狀態列錶。

警告 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 狀態 type and the color and flag configurations with the PropertyChanges 類型。

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 對象。

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

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

運行某些腳本使用 StateChangeScript
Override an existing signal handler for an object using PropertyChanges
重新父級 Item 使用 ParentChange
修改錨點值使用 AnchorChanges

默認狀態

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 `當` 特性

為方便起見， State 類型擁有 當 property that can bind to expressions to change the state whenever the bound expression evaluates to true 。 當 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 .

動畫狀態改變

State changes induce abrupt value changes. The Transition type allow smoother changes during state changes. In transitions, animations and interpolation behaviors are definable. The 動畫和過渡 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.

狀態快速轉發

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:

The state is fast forwarded to determine the complete set of end values.
The state is rewound.
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.