1、States（状态）
状态用于管理有id的元素，它是由多个state元素构成，每个元素都可以定义多个不同的状态（使用states属性定义状态列表；当前状态由state属性指定）当元素进入某个状态时，状态所对应的属性将被设置。我们可以：1）修改anchors对齐方式；2）修改item的parent；3）执行一段javascript代码
状态的例子：
Rectangle {
Rectangle {
id: stop_light
...
}
Rectangle {
id: go_light
...
}
states: [
State {
name: "stop"
PropertyChanges {
target: stop_light; color: "red"
}
PropertyChanges {
target: go_light; color: "black"
}
},
State {
name: "go"
PropertyChanges {
target: stop_light; color: "black"
}
PropertyChanges {
target: go_light; color: "green"
}
}
]//定义两个状态分别为go和stop，
//使用PropertyChanges为每个状态设置目标和起对应的属性值
state: "stop"//define initial state
MouseArea {
anchors.fill: parent
onClicked: parent.state == "stop" ?
parent.state = "go" :
parent.state = "stop"
}//使用MouseArea的事件响应来完成不同状态的切换
}
2、修改属性
states通过PropertyChanges来修饰属性，指定目标元素的id给target属性，定义要修改的目标元素的属性值（一个PropertyChanges元素可以修改多个属性），当进入相应状态时，对应的属性设置就会生效
3、默认属性
每个元素都可以指定一个默认属性，设置属性时，属性名字标签可以被省略。state元素的默认属性是changes
4、状态条件
1）让state决定何时被激活：使用条件判断来决定是否激活一个state
2）使用when属性：用表达式来判断条件，并返回true或false
3）state list中只能有一个state是被激活的：确保一个时间只有一个条件为真
Rectangle {
TextInput {
id: text_field
text: "Enter text..."
}
Image {
id: clear_button
source: "images/clear.png"
MouseArea {
anchors.fill: parent
onClicked: text_field.text = ""
}
}
states:[
State {
name: "with text"
when: text_field.text != ""
PropertyChanges {
target: clear_button
opacity: 1.0
}
},
State {
name: "without text"
when: text_field.text == ""
PropertyChanges {
target: clear_button
opacity: 0.25
}
PropertyChanges {
target: text_field
focus: true
}
}
]
}
5、过渡
1）Transition元素用于为状态之间的切换提供动画支持（A. 过渡只能被状态切换激活；B. 过渡中的动画可以以串行或并行的方式执行）
2）通过设置to和from属性，我们可以指定与特定状态绑定的动画
3）过渡可以被设置为reversible（默认为false）。当满足条件时，自动切换到以前的状态
示例：（修改上面的go和stop程序）
transitions: [
Transition {
from: "stop"; to: "go"
PropertyChanges {
target: stop_light
properties: "color"
duration: 1000
}
},
Transition {
from: "go"; to: "stop"
PropertyAnimation {
target: go_light
properties: "color"
duration: 1000
}
}
]
通过设置transitions属性来定义多个Transition，设置“stop”和“go”之间的状态切换6、通用过渡
transitions: [
Transition {
from: "*"; to: "*"
PropertyChanges {
target: stop_light
properties: "color"
duration: 1000
}
PropertyChanges {
target: go_light
properties: "color"
duration: 1000
}
}
]
使用“*”匹配所有状态（默认值为“*”）；只要有状态改变，过渡就会被执行；两个目标的过渡是同时进行的7、可逆过渡
transitions: [
Transition {
from: "with text"; to: "without text"
reversible: true
PropertyChanges {
target: clear_button
properties: "opacity"
duration: 1000
}
}
]
状态若使用when属性，就可以使用可逆过渡；当两个过渡应用到相同的属性时，可以采用；从状态“with text”到“without text”的时候，过渡生效，当满足条件时，再转换回来，而无须定义两个过渡8、动画
1）可以对元素的属性变化加入动画：Types： real，int，color，rect，point，size
2）有三种使用动画的方法：基本的属性动画、过渡、属性行为
3）动画可以分组、串行或并行执行：SequantialAnimation、ParallelAnimation、PauseAnimation
4）预定义的easing curve：OutQuad、InElastic、OutBounce等等（欲了解更多详细信息，请查看PropertyAnimation文档）
5）使用属性动画，使用PorpertyAnimation，NumberAnimation，or ColorAnimation他们有公共的基类Animation
6）对于属性行为，使用Behavior
7）对于过渡，使用Transition
示例一：
Rectangle {//Example of drop-and-bounce effect on an image
id: rect
width: 120; height: 200
Image {
id: img
source: "images/home01.jpg"
x: 60-img.width/2; y: 0
SequentialAnimation on y {
running: true
loops: Animation.Infinite
NumberAnimation {
to: 200-img.height
easing.type: "OutBounce"
duration: 2000
}
PauseAnimation {
duration: 1000
}
NumberAnimation {
to: 0
easing.type: "OutQuad"
duration: 1000
}
}
}
}
示例二： Rectangle {//Animation as a separate element; refered to by its id
id: rect
width: 120; height: 200
PropertyAnimation {
id: animation
target: image
property: "scale"
from: 1; to: .5
}
Image {
id: image
source: "images/home01.jpg"
MouseArea {
anchors.fill: parent
onClicked: animation.start()
}
}
}
9、属性行为
设置一个默认的动画在属性发生改变的时候执行（无论什么造成的属性改变，都会执行）
示例：西面这段动画在redRect的x发生改变的时候执行
Rectangle {
...
Rectangle {
id: redRect
color: "red"
width: 100; height: 100
x:...
Behavior on x {
NumberAnimation {
duration: 300; easing.type: "InOutQuad"
}
}
}
}
10、使用状态和过渡
1）避免定义过于复杂的状态机
A）不要使用一个状态机来管理所有的UI部分；
B）针对不同的控件使用独立的状态机，然后通过状态属性把控件的状态联系起来
2）使用script代码设置状态，简单，但是很难管理，且没有可逆过渡
3）使用状态条件来控制状态更符合声明式的风格，但状态条件可能会很复杂
11、总结
1）状态：使用状态来管理其他元素的属性
A）定义状态是用元素的属性，每个状态都必须有独立的名字
B）给元素设置一个id是很有用的，使用PropertyChanges来修改元素的属性
C）元素的state属性，保存了当前的状态。可以用javascript来修改它的值，也可以使用when属性来设置状态成立条件
2）过渡：过渡用来描述状态之间的切换过程
A）使用transitions属性来定义元素的过渡
B）过渡需要描述始末两个状态，使用from和to这两个属性，使用通配符“*”来表示所有状态
C）过渡是可逆的，相当于把from和to属性的值交换
12、计时器
计时器使用Timer元素表示的，只提供了一个简单的信号：onTriggered，可以单词或重复使用计时器
示例如下：
Timer {
interval: 500
running: true
repeat: true
onTriggered: time.text = Date().toString()
}
Text {
id: time
}