Qt使用教程：創建Qt Quick應用程序（三）

---

<Qt Enterprise最新版下載>

添加應用程序邏輯

新的項目向導將樣本代碼添加到main.qml文件中，用來創建菜單項和按鈕。通過刪除舊的代碼和添加新的代碼來修改樣本代碼。您可以從UI表單中刪除按鈕，同時還需要從main.qml中刪除相應的代碼（或應用程序不能被創建）。

編輯main.qml文件添加指針到兩個附加狀態中：State1和State2。您不能使用Qt Quick Designer為一個Window QML類型添加狀態。使用代碼編輯器添加狀態到 QML類型中，通過狀態組的ID來引用它們。

1. 置頂窗口的大小和背景顏色作為類型的屬性：

ApplicationWindow {
visible: true
title: qsTr("Transitions")
width: 330
height: 330

2. 為MainForm類型指定一個ID，以便您能使用在MainForm.ui.qml中導出的屬性：

MainForm {
anchors.fill: parent
id: page

3. 在mouseArea1中添加一個指針到所點擊的表達式中：

mouseArea1 {
onClicked: stateGroup.state = ' '
}

表達式設置狀態為基本狀態，并且將圖像返回到起初始位置。

4. 添加指針到mouseArea2所點擊的表達式中，并將狀態設置為State1：

mouseArea2 {
onClicked: stateGroup.state = 'State1'
}

5. 添加指針到mouseArea3所點擊的表達式中，并將狀態設置為State2：

mouseArea3 {
onClicked: stateGroup.state = 'State2'
}
}

Qt logo的位置綁定到矩形，以確保當視圖在不同尺寸的屏幕上縮放時該logo顯示在矩形內。設置表達式的x和y屬性，代碼如下：

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 Enterprise最新正版授權！詳情請""

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>