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
}