Qt使用教程：創(chuàng)建移動(dòng)應(yīng)用程序（二）

---

<Qt Enterprise最新版下載>

創(chuàng)建Accelbubble主視圖

當(dāng)您傾斜設(shè)備時(shí)應(yīng)用程序的主視圖會(huì)顯示一個(gè)SVG泡沫圖像在屏幕上移動(dòng)。為了在項(xiàng)目中使用Bluebubble.svg，您可以將其復(fù)制到項(xiàng)目目錄中（QML文件相同的子目錄中），該圖像會(huì)出現(xiàn)在資源中。您也可以使用任何其他圖像或QML類型來代替。

想要在Design模式下創(chuàng)建UI：

1. 在Projects視圖中，雙擊MainForm.ui.qml文件來在Qt Quick Designer中打開它。

2. 在Navigator中選擇RowLayout并點(diǎn)擊Delete將其刪除。

3. 在Library > QML Types中，選擇Rectangle并將其拖動(dòng)到導(dǎo)航器的Item中。

4. 在導(dǎo)航器中選擇矩形框來編輯它們的屬性：

• 在ID字段中輸入mainWindow，使其能夠從其他地方引用矩形框。
• 選擇Layout標(biāo)簽，然后點(diǎn)擊Fill to Parent按鈕來錨定矩形框到項(xiàng)目中。

5. 在Library > Resources中，選擇Bluebubble.svg并將其拖動(dòng)到導(dǎo)航器的mainWindow中。

6. 在Properties面板的Id字段中輸入bubble，使其能夠從其他地方引用圖片。

7. 在導(dǎo)航器中選擇Export按鈕來導(dǎo)出mainWindow和bubble作為屬性。

想要修改bubble的屬性使其不支持Qt Quick Designer，因此，我們?yōu)樗鼊?chuàng)建一個(gè)自定義的QML類型：

• 選擇Edit來在代碼編輯器中打開MainForm.ui.qml。
• 右鍵單擊Image并選擇Refactoring > Move Component into Separate File。
• 在Component name字段中，輸入Bubble并選擇OK來創(chuàng)建Bubble.qml。

在MainForm.ui.qml中Qt Creator創(chuàng)建一個(gè)引用到Bubble.qml。想要檢查代碼，您可以比較具有MainForm.ui.qml示例文件的MainForm.ui.qml和具有Bubble.qml示例文件的Bubble.qml。用戶界面現(xiàn)在已經(jīng)準(zhǔn)備就緒，您可以切換到編輯模式編輯main.qml和Bubble.qml文件。

移動(dòng)Bubble

新的項(xiàng)目向?qū)砑訕颖敬a到main.qml文件中來創(chuàng)建菜單項(xiàng)目和按鈕。通過刪除舊的代碼并添加新的代碼來修改樣本代碼。您已經(jīng)從UI表單中刪除了按鈕，因此還需要從main.qml中刪除相應(yīng)的代碼。

在代碼編輯器中，編輯Bubble.qml來添加屬性，我們將使用該屬性來定位圖片：

Image {
source: "Bluebubble.svg"
smooth: true
property real centerX
property real centerY
property real bubbleCenter
}

在代碼編輯器中，編輯main.qml指定應(yīng)用程序標(biāo)題，通過以下的代碼片段說明：

ApplicationWindow {
id: mainWindow
visible: true
width: 640
height: 480
title: qsTr("Accelerate Bubble")

使用bubble屬性來定位圖像：

MainForm {
anchors.fill: parent
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2

然后基于新屬性設(shè)置圖像的X和Y位置：

x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter

}

然后基于加速度傳感器值添加代碼移動(dòng)bubble：

1. 添加以下的import語句到main.qml中：

import QtSensors 5.5

2. 添加具有必要屬性的Accelerometer類型：

Accelerometer {
id: accel
dataRate: 100
active: true

}

3. 添加以下JavaScript函數(shù)來計(jì)算基于當(dāng)前加速度值的bubble的x和y的位置：

function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}

當(dāng)加速度值變化時(shí)為Accelerometer類型的onReadingChanged信號(hào)添加以下的JavaScript代碼：

onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)

if (isNaN(newX) || isNaN(newY))
return;

if (newX < 0)
newX = 0

if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width

if (newY < 18)
newY = 18

if (newY > mainWindow.height - bubble.height)
newY = mainWindow.height - bubble.height

bubble.x = newX
bubble.y = newY
}

我們希望確保bubble的位置始終在屏幕的邊界內(nèi)。如果Accelerometer返回的不是數(shù)字（NaN），那么該值將會(huì)被忽略并且bubble位置不更新。

5. 在bubble的x和y屬性中添加SmoothedAnimation操作使其運(yùn)動(dòng)看起來更加平滑。

Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}

購(gòu)買Qt Enterprise最新正版授權(quán)！詳情請(qǐng)"咨詢?cè)诰€客服"

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