指定如何按状态改变项锚点 | |
指定如何在状态改变时重设项父级 | |
描述状态的新特性绑定或值 | |
State | 定义对象和特性的配置 |
指定如何按状态运行脚本 | |
为非项类型提供内置状态支持 |
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:
所有
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:
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.
当
特性
为方便起见,
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:
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.