Qt使用教程：創(chuàng)建Qt Quick應(yīng)用程序（三）

---

<Qt Enterprise最新版下載>

添加應(yīng)用程序邏輯

新的項(xiàng)目向?qū)颖敬a添加到main.qml文件中，用來創(chuàng)建菜單項(xiàng)和按鈕。通過刪除舊的代碼和添加新的代碼來修改樣本代碼。您可以從UI表單中刪除按鈕，同時還需要從main.qml中刪除相應(yīng)的代碼（或應(yīng)用程序不能被創(chuàng)建）。

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

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

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

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

MainForm {
anchors.fill: parent
id: page

3. 在mouseArea1中添加一個指針到所點(diǎn)擊的表達(dá)式中：

mouseArea1 {
onClicked: stateGroup.state = ' '
}

表達(dá)式設(shè)置狀態(tài)為基本狀態(tài)，并且將圖像返回到起初始位置。

4. 添加指針到mouseArea2所點(diǎn)擊的表達(dá)式中，并將狀態(tài)設(shè)置為State1：

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

5. 添加指針到mouseArea3所點(diǎn)擊的表達(dá)式中，并將狀態(tài)設(shè)置為State2：

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

Qt logo的位置綁定到矩形，以確保當(dāng)視圖在不同尺寸的屏幕上縮放時該logo顯示在矩形內(nèi)。設(shè)置表達(dá)式的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運(yùn)行該應(yīng)用程序。

單擊矩形將Qt logo從一個矩形移動到另一個矩形中。

添加動畫到視圖中

添加轉(zhuǎn)換到狀態(tài)組中，用于定義當(dāng)Qt logo在不同狀態(tài)間移動時屬性應(yīng)該如何改變。該轉(zhuǎn)換適用于應(yīng)用動畫到Qt logo中。例如當(dāng)Qt logo移動到middleRightRect并簡化成bottomLeftRect時，它會反彈回來。在代碼編輯器中添加轉(zhuǎn)換。

1. 在代碼編輯器中，添加以下的代碼來指定當(dāng)移動到State1時，Qt logo的x和y坐標(biāo)超過1秒的線性更改：

transitions: [
Transition {
from: "*"; to: "State1"
NumberAnimation {
easing.type: Easing.OutBounce
properties: "x,y";
duration: 1000
}
},

2. 您可以使用Qt Quick工具欄從線性O(shè)utBounce中為動畫更改緩動曲線類型：

• 在代碼編輯器中點(diǎn)擊NumberAnimation來顯示相應(yīng)圖標(biāo)，然后單擊該圖標(biāo)打開工具欄。
• 在Easing字段中選擇Bounce。
• 在Subtype字段中選擇Out。

3. 添加以下的代碼來指定當(dāng)移動到State2時，Qt logo的x和y坐標(biāo)超過2秒的線性更改，并且InOutQuad easing函數(shù)被調(diào)用：

Transition {
from: "*"; to: "State2"
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000
}
},

4. 添加以下的代碼來指定當(dāng)移動到任意其他狀態(tài)時，Qt logo的x和y坐標(biāo)超過200毫秒的線性更改：

Transition {
NumberAnimation {
properties: "x,y";
duration: 200
}
}
]

5. Ctrl+ R運(yùn)行該應(yīng)用程序。

點(diǎn)擊矩形來查看動畫切換。文件：

• transitions/MainForm.ui.qml
• transitions/main.qml
• transitions/qml.qrc
• transitions/transitions.pro

購買Qt Enterprise最新正版授權(quán)！詳情請"咨詢在線客服"

新年新禧新氣象，送禮送福送優(yōu)惠！優(yōu)惠詳情點(diǎn)擊查看>>