Qt使用教程：創建移動應用程序（二）

---

<Qt Enterprise最新版下載>

創建Accelbubble主視圖

當您傾斜設備時應用程序的主視圖會顯示一個SVG泡沫圖像在屏幕上移動。為了在項目中使用，您可以將其復制到項目目錄中（QML文件相同的子目錄中），該圖像會出現在資源中。您也可以使用任何其他圖像或QML類型來代替。

想要在Design模式下創建UI：

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

2. 在Navigator中選擇RowLayout并點擊Delete將其刪除。

3. 在Library > QML Types中，選擇Rectangle并將其拖動到導航器的Item中。

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

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

5. 在Library > Resources中，選擇Bluebubble.svg并將其拖動到導航器的mainWindow中。

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

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

想要修改bubble的屬性使其不支持Qt Quick Designer，因此，我們為它創建一個自定義的QML類型：

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

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

移動Bubble

新的項目向導添加樣本代碼到main.qml文件中來創建菜單項目和按鈕。通過刪除舊的代碼并添加新的代碼來修改樣本代碼。您已經從UI表單中刪除了按鈕，因此還需要從main.qml中刪除相應的代碼。

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

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

在代碼編輯器中，編輯main.qml指定應用程序標題，通過以下的代碼片段說明：

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

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

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

}

然后基于加速度傳感器值添加代碼移動bubble：

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

import QtSensors 5.5

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

Accelerometer {
id: accel
dataRate: 100
active: true

}

3. 添加以下JavaScript函數來計算基于當前加速度值的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);
}

當加速度值變化時為Accelerometer類型的onReadingChanged信號添加以下的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的位置始終在屏幕的邊界內。如果Accelerometer返回的不是數字（NaN），那么該值將會被忽略并且bubble位置不更新。

5. 在bubble的x和y屬性中添加操作使其運動看起來更加平滑。

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

購買Qt Enterprise最新正版授權！詳情請""

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