Qt使用教程之建立Qt Quick應用程序（三）
<Qt Enterprise最新版下載>html
添加應用程序邏輯
新的項目嚮導將樣本代碼添加到main.qml文件中，用來建立菜單項和按鈕。經過刪除舊的代碼和添加新的代碼來修改樣本代碼。您能夠從UI表單中刪除按鈕，同時還須要從main.qml中刪除相應的代碼（或應用程序不能被建立）。app
編輯main.qml文件添加指針到兩個附加狀態中：State1和State2。您不能使用Qt Quick Designer爲一個Window QML類型添加狀態。使用代碼編輯器添加狀態到StateGroup QML類型中，經過狀態組的ID來引用它們。編輯器
1. 置頂窗口的大小和背景顏色做爲ApplicationWindow類型的屬性：函數
ApplicationWindow {
visible: true
title: qsTr(
"Transitions"
)
width
:
330
height
:
330
2. 爲MainForm類型指定一個ID，以便您能使用在MainForm.ui.qml中導出的屬性：工具
MainForm {
anchors.fill: parent
id: page
3. 在mouseArea1中添加一個指針到所點擊的表達式中：動畫
mouseArea
1
{
onClicked: stateGroup.state =
' '
}
表達式設置狀態爲基本狀態，而且將圖像返回到起初始位置。ui
4. 添加指針到mouseArea2所點擊的表達式中，並將狀態設置爲State1：spa
mouseArea
2
{
onClicked: stateGroup.state =
'State1'
}
5. 添加指針到mouseArea3所點擊的表達式中，並將狀態設置爲State2：指針
mouseArea
3
{
onClicked: stateGroup.state =
'State2'
}
}
Qt logo的位置綁定到矩形，以確保當視圖在不一樣尺寸的屏幕上縮放時該logo顯示在矩形內。設置表達式的x和y屬性，代碼以下：code
StateGroup {
id: stateGroup
states: [
State {
name:
"State1"
PropertyChanges {
target: page.
icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name:
"State2"
PropertyChanges {
target: page.
icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
}
}
]
7. Ctrl+R運行該應用程序。
單擊矩形將Qt logo從一個矩形移動到另外一個矩形中。
添加動畫到視圖中
添加轉換到狀態組中，用於定義當Qt logo在不一樣狀態間移動時屬性應該如何改變。該轉換適用於應用動畫到Qt logo中。例如當Qt logo移動到middleRightRect並簡化成bottomLeftRect時，它會反彈回來。在代碼編輯器中添加轉換。
1. 在代碼編輯器中，添加如下的代碼來指定當移動到State1時，Qt logo的x和y座標超過1秒的線性更改：
transitions: [
Transition {
from:
"*"
; to:
"State1"
NumberAnimation {
easing.type: Easing.OutBounce
properties:
"x,y"
;
duration:
1000
}
},
2. 您能夠使用Qt Quick工具欄從線性OutBounce中爲動畫更改緩動曲線類型：
在代碼編輯器中點擊NumberAnimation來顯示相應圖標，而後單擊該圖標打開工具欄。
在Easing字段中選擇Bounce。
在Subtype字段中選擇Out。
3. 添加如下的代碼來指定當移動到State2時，Qt logo的x和y座標超過2秒的線性更改，而且InOutQuad easing函數被調用：
Transition {
from:
"*"
; to:
"State2"
NumberAnimation {
properties:
"x,y"
;
easing.type: Easing.InOutQuad;
duration:
2000
}
},
4. 添加如下的代碼來指定當移動到任意其餘狀態時，Qt logo的x和y座標超過200毫秒的線性更改：
Transition {
NumberAnimation {
properties:
"x,y"
;
duration:
200
}
}
]
5. Ctrl+ R運行該應用程序。
點擊矩形來查看動畫切換。文件：
有興趣的朋友能夠點擊查看更多有關Qt的文章！
- 1. Qt使用教程之建立Qt Quick應用程序（二）
- 2. Qt使用教程之建立Qt Quick應用程序（一）
- 3. Qt使用教程之建立移動應用程序（三）
- 4. Qt使用教程之建立Qt Quick項目
- 5. Qt使用教程之建立Qt Quick UI表單（四）
- 6. Qt使用教程之使用Qt Quick UI表單（三）
- 7. Qt使用教程之建立移動應用程序（一）
- 8. 如何創建Qt quick應用程序
- 9. Qt使用教程之使用Qt Quick UI表單（六）
- 10. Qt使用教程之使用Qt Quick UI表單（一）
- 更多相關文章...
- • XML 應用程序 - XML 教程
- • TortoiseSVN 使用教程 - SVN 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。