本教程描述如何使用Qt Creator(使用版本：QT 5.2.1)執行Qt狀態（states）和轉換(transitions)。
使用示例code創建一個應用程序顯示一個QT logo，並隨着我們點擊界面上的矩形時移動顯示logo。
創建工程
1.選擇 “文件”->“新建文件或項目”->“Qt Quick Application”->"選擇"
2.輸入名稱 例如：“Transitions”
3.選擇工程的存放路徑，例如此處選擇了D:\QT\QtExamples
4.點擊“下一步”，默認是“Qt Quick 2.0”->"下一步"
注意：該示例中的QML類型也支持Qt Quick 1.1。若運行該程序的平臺是運行QT 4 的，則選擇Qt Quick 1.1。
5.選擇kits（可默認）->"下一步"
6.7. 默認操作
8.按Ctrl+R組合鍵運行程序
Qt Crearor 自動生成一個QML(qml)文件夾，你可以可以修改來創建應用程序的主要視圖。
第二步：創建主要視圖
該應用程序的主要視圖是在屏幕的左上角展示一個Qt logo以及兩個空的矩形。
爲了在工程中使用state.png圖片，你必須要把它copy到該工程目錄中的OML文件夾下。例如此處我將該圖片放至D:\QT\QtExamples\Transitions\qml\Transitions路徑下
Qt Creator將自動生成一個文件夾，用來存放該類文件；同時在“設計”中的資源面板下也會產生相對於的文件。
1.在“項目”窗口下打開 main.qml文件（用於後期的code編寫）
2.點擊打開“設計”
3.在“導航”面板下，選擇“Text”,並刪除它
4.選擇“Rectangle”,編輯它的屬性（右側）
1.在 id 一欄 輸入 “page”,使得之後能夠從其它地方引用矩形
2.在Color一欄，設置顏色爲 #343434
3.在code編輯區，刪除 Qt.quit()命令行
5.在“庫”面板下的“資源”選項中，選中state.png圖片並將它拖到畫布中
1.在 Id 一欄中，輸入“icon”
2.在 Position 一欄中，設置X爲10，Y爲20
6.在“庫”面板中的“QML Type”選項下，選中“Rectangle”,拖到畫布中，並編輯其屬性
1.在 Id 一欄中，輸入“topLeftRect”
2.在 Size一欄中，設置W和H位64，矩形的大小正好匹配圖片的大小
3.在Color一欄中，點擊透明按鈕![]()
![]()
，使得矩形變爲透明。
，使得矩形變爲透明。
4.在Border一欄中，設置邊界顏色爲#808080
5.在Rectangle一欄中，設置Border爲1
6.在在Rectangle一欄中，設置Radius爲6（創建圓角矩形）
7.點開Layout選項，點擊表示頂部和座標的錨點按鈕，將矩形定在頁面的左上角
8.分別爲頂部錨點設置Margin爲20，左邊錨點設置Margin爲10
7.在導航面板中，將Mouse Area拖到topLeftRect中，使得它只應用於矩形範圍，而不是整個頁面中。（將page下的內容關係重新調整了之後（拖動相應內容即可實現））
8.編輯
Mouse Area屬性：
1.點開 Laypout，點擊![]()
![]()
（Fill
to Parent）按鈕，爲矩形設置鼠標範圍錨點
（Fill
to Parent）按鈕，爲矩形設置鼠標範圍錨點
2.在code編輯區（main.qml文件中），編輯鼠標區域點擊事件：
main.qml文件內容如下：
import QtQuick 2.0
Rectangle {
id: page
width: 360
height: 360
color: "#343434"
Image {
id: icon
x: 10
y: 20
source: "state.png"
}
Rectangle {
id: topLeftRect
x: 10
y: 20
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea1
anchors.fill: parent
onClicked:page.state = ''
}
}
}
9.在導航面板中，在page下，複製粘貼兩份 topLeftRect, Qt Creator 會自動爲它們重命名爲topLeftRect1和 topLeftRect2.
10.選中topLeftRect1，編輯其屬性
1.在Id一欄中，輸入 middleRightRect
2.在Layout中，選擇垂直居中和右邊錨按鈕，來錨定中間右邊的矩形位置
3.在Margin一欄中，爲右邊錨點設置距離爲10，垂直錨點設置爲0（假如在該欄中不能同時設定兩處錨定距離，則直接在code中編寫實現）
4.在code編輯區，Mouse Area中添加如下內容： onClicked: paper.state = 'state1' (我們將在之後創建state1)
11.選擇topLeftRect2，並編進其屬性（與middleRightRect的操作相似）
1.在Id一欄中，輸入bottomLeftRect
2.在Layout中，選擇底部和左邊錨按鈕，來錨定底部左邊的矩形位置
3.在Margin一欄中，爲底部錨點設置距離爲20，左邊錨點設置爲10（假如在該欄中不能同時設定兩處錨定距離，則直接在code中編寫實現）
4.在code編輯區，Mouse Area中添加如下內容： onClicked: paper.state = 'state2'
此時 main.qml文件內容如下：
import QtQuick 2.0
Rectangle {
id: page
width: 360
height: 360
color: "#343434"
Image {
id: icon
x: 10
y: 20
source: "state.png"
}
Rectangle {
id: topLeftRect
x: 10
y: 20
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea1
anchors.fill: parent
onClicked:page.state = ''
}
}
Rectangle {
id: middleRightRect
x: 296
y: 148
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.right: parent.right
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
MouseArea {
id: mouseArea2
anchors.fill: parent
onClicked:page.state = 'State1' //注意此處大小寫
}
border.width: 1
border.color: "#808080"
}
Rectangle {
id: bottomLeftRect
y: 10
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
MouseArea {
id: mouseArea3
anchors.fill: parent
onClicked:page.state = 'State2'
}
border.width: 1
border.color: "#808080"
}
}
12.按Ctrl+S保存
13.按Ctrl+R運行
你將看到在做上端的矩形中有個Qt logo，然後是在中心右端、底部左端分別有一個矩形
現在，你可以添加額外的狀態爲整個應用程序添加視圖
添加視圖
在main.qml文件中，已經創建了兩個狀態：state1和state2
1.在狀態面板中點擊空白區域，創建狀態state1
2.同理創建state2
3.在code編輯器中，爲矩形綁定Qt logo的位置，確保圖標隨着矩形能被顯示在不同大小屏幕的視圖中。
4.按Ctrl+R運行：
任意點擊某個矩形，該矩形上隨之顯示logo圖片。
添加動畫視覺
添加轉換定義當Qt logo在狀態之間轉換時屬性的更改。該轉換將動畫應用到logo中。例如，當Qt logo移動到middleRightRect中時發生反彈，更易進入bottomLeftRect。
1.在code編輯器中，添加如下代碼來特定當改變到狀態1時。Qt logo的x和y的座標線性改變持續1秒。
Transition {
from: "*"; to: "State1"
NumberAnimation {
properties: "x,y";
duration: 1000
}
},
2.也可以使用Qt Quick 工具欄。從liner到OutBounce改變曲線類型
1.點擊 NumberAnimation,顯示
點擊小燈按鈕，打開工具欄如下：
2.在彈性彎曲一欄中，選擇Bounce
3.在子類型一欄中，選擇Out
3.同理爲轉變到狀態2時特定移動動畫，持續2秒，此處使用了一個InOutQuad彈性函數。
Transition {
from: "*"; to: "State2"
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000
}
},
4.爲其他狀態的特定動畫，持續時間爲200毫秒
Transition {
NumberAnimation {
properties: "x,y";
duration: 200
}
}
]
5.按Ctrl+R運行程序
完成以上所有步驟後，main.qml文件中內容如下：
import QtQuick 2.0
Rectangle {
id: page
width: 360
height: 360
color: "#343434"
Image {
id: icon
x: 10
y: 20
source: "state.png"
}
Rectangle {
id: topLeftRect
x: 10
y: 20
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea1
anchors.fill: parent
onClicked:page.state = ''
}
}
Rectangle {
id: middleRightRect
x: 296
y: 148
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.right: parent.right
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
MouseArea {
id: mouseArea2
anchors.fill: parent
onClicked:page.state = 'State1'
}
border.width: 1
border.color: "#808080"
}
Rectangle {
id: bottomLeftRect
y: 10
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
MouseArea {
id: mouseArea3
anchors.fill: parent
onClicked:page.state = 'State2'
}
border.width: 1
border.color: "#808080"
}
states: [
State {
name: "State1"
PropertyChanges {
target: icon
x:middleRightRect.x
y:middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: icon
x:bottomLeftRect.x
y:bottomLeftRect.y
}
}
]
transitions: [
Transition {
from: "*"
to: "State1"
NumberAnimation{
easing.type: Easing.OutBounce
// easing.type: Easing.InBounce //出發時的效果
properties: "x,y";
duration:1000
//進入狀態1的動畫設置（動畫持續時間1秒、進入時含彈跳效果）
}
},
Transition {
from: "*"
to: "State2"
NumberAnimation{
properties: "x,y";
easing.type:Easing.InOutQuad
// easing.type:Easing.InOutBounce //出發進入時的動畫效果
duration: 2000
//進入狀態2的動畫設置（動畫持續時間2秒）
}
},
Transition {
NumberAnimation{
properties: "x,y";
duration: 200
//進入第一個矩形的動畫效果（動畫持續時間200毫秒）
}
}
]
}