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

---

<Qt Enterprise最新版下載>

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

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

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

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

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

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

MainForm {
anchors.fill: parent
id: page

3. 在mouseArea1中添加一個(gè)指針到所點(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)視圖在不同尺寸的屏幕上縮放時(shí)該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從一個(gè)矩形移動(dòng)到另一個(gè)矩形中。

添加動(dòng)畫到視圖中

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

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

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

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

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

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

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

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

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

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

點(diǎn)擊矩形來(lái)查看動(dòng)畫切換。文件：

購(gòu)買Qt Enterprise最新正版授權(quán)！詳情請(qǐng)""

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