QML States

【转】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文章中有更详细的信息关于创建状态动画。