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

<Qt Enterprise最新版下載>

建立Accelbubble主視圖

當您傾斜設備時應用程序的主視圖會顯示一個SVG泡沫圖像在屏幕上移動。爲了在項目中使用Bluebubble.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類型：

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屬性中添加SmoothedAnimation操做使其運動看起來更加平滑。

Behavior on y {

SmoothedAnimation {

easing.type: Easing.Linear

duration: 100

}

}

Behavior on x {

SmoothedAnimation {

easing.type: Easing.Linear

duration: 100

}

}

有興趣的朋友能夠點擊查看更多有關Qt的文章！