【转】http://blog.csdn.net/jokerjhm/article/details/6754091
许多用户界面的设计是由state驱动的,界面不同的配置依赖当前的状态。例如,一个交通信号会依靠它的状态来配置旗帜或灯。而在信号的stop状态,红灯亮而黄灯和绿灯灭。在caution状态,黄灯亮其他等灭。
在QML中states是定义在State元素中的属性配置集合。可能不同的配置,例如:
[list]
[]显示一些UI元素和隐藏其他的
[]呈现不同的可用的行为给用户
[]启动,停止,或者暂停动画
[]在新的状态执行一些需要的脚本
[]为特定的项更改了一个属性值
[]显示一个不同的视图或和屏幕
[/list]所有基于item的对象拥有state属性,通过添加新的State对象到项的states属性里指定额外的状态。一个组件里每个状态都有一个独特的名字,默认是空字符串。设置state属性为状态的名字可以改变这个项的当前状态。
Non-Item对象可以通过StateGroup元素来使用状态。
创建一个状态,加一个State对象到项的States属性里,这个属性持有这个项的状态列表。
一个警告signal组件可能有两个状态,NORMAL 和CRITICAL 状态。假定在NORMAL 的状态,信号的颜色应该是green和警告flag是降下的。与此同时,在CRITICAL 状态下,颜色应该是red和旗是升起的。我们可以采用状态模型 使用State元素和用PropertyChanges元素配置的color和flag。
<font color="Black"> 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"}
}
]
}</font>
PropertyChanges元素将改变的对象属性的值。 可以通过id引用对象。组件外部的对象也能用id来引用,这里例证了外部flag对象的属性变化。
另外,可以给state属性赋于合适的信号状态值来改变状态。状态可以在一个MouseArea元素里切换,当接收到鼠标点击,指定一个不同的状态。
<font color="Black">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"
}
}
}</font>
State元素不限于执行属性值的修改。它也可以:
[list]
[]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
[/list]The Default State
每个基于item的组件一个state属性和默认状态。默认状态是空字符串(" "),包含了项所有的初始的属性值。这是默认状态是非常有用的,在状态变化之前管理属性值。设置state属性为空字符串会加载默认状态。
为了方便起见,State元素都有一个when属性,可以绑定表达式来改变状态,当绑定的表达式评估为true。当表达式评估为false,状态会退回到default state。
<font color="Black">Rectangle {
id: bell
width: 75; height: 75
color: "yellow"
states: State {
name: "RINGING"
when: (signal.state == "CRITICAL")
PropertyChanges {target: speaker; play: "RING!"}
}
}</font>
当signal.state 是 CRITICAL,bell组件变换到RINGING 状态。
状态变化会引起值的突然变化。Transition属性允许这变化在状态变化期间会更平滑。在transitions中,动画和插值行为是可定义的。Animation and Transitions文章中有更详细的信息关于创建状态动画。