Qt是目前最先進、最完整的跨平臺C++開發工具。它不僅完全實現了一次編寫，所有平臺無差別運行，更提供了幾乎所有開發過程中需要用到的工具。如今，Qt已被運用于超過70個行業、數千家企業，支持數百萬設備及應用。

本教程介紹了在使用Qt 6作為最低Qt版本并使用CMake作為構建系統時，如何使用Qt Creator開發適用于Android和iOS設備的Qt Quick應用程序。(點擊這里回顧上文內容>>)

添加圖像作為資源

當您傾斜設備時，應用程序的主視圖會顯示一個 SVG 氣泡圖像，該圖像會在屏幕上移動。

我們在本教程中使用 Bluebubble.svg，但您可以使用任何其他圖像或組件來代替。

要在運行應用程序時顯示圖像，您必須在向導為您創建的 CMakeLists.txt 文件的 RESOURCES 部分中將其指定為資源：

qt_add_qml_module(appaccelbubble
URI accelbubble
VERSION 1.0
QML_FILES main.qml
RESOURCES Bluebubble.svg
)

創建 Accelbubble 主視圖

我們通過添加一個以 Bluebubble.svg 作為源的 Image 組件在 main.qml 文件中創建主視圖：

Image {
id: bubble
source: "Bluebubble.svg"
smooth: true

接下來，我們添加自定義屬性以根據主窗口的寬度和高度定位圖像：

property real centerX: mainWindow.width / 2
property real centerY: mainWindow.height / 2
property real bubbleCenter: bubble.width / 2
x: centerX - bubbleCenter
y: centerY - bubbleCenter

我們現在要添加代碼以根據加速度計傳感器值移動氣泡。 首先，我們添加以下導入語句：

import QtSensors

接下來，我們添加具有必要屬性的 Accelerometer 組件：

Accelerometer {
id: accel
dataRate: 100
active:true

然后，我們添加以下 JavaScript 函數，這些函數根據當前的 Accelerometer 值計算氣泡的 x 和 y 位置：

function calcPitch(x,y,z) {
return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
}
function calcRoll(x,y,z) {
return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
}

我們為 Accelerometer 組件的 onReadingChanged 信號添加以下 JavaScript 代碼，以使氣泡在 Accelerometer 值發生變化時移動：

onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .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
}

我們要確保氣泡的位置始終在屏幕范圍內，如果加速度計返回的不是數字 (NaN)，則忽略該值并且不更新氣泡位置。

我們在氣泡的 x 和 y 屬性上添加 SmoothedAnimation 操作，使其運動看起來更平滑。

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

Qt組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網格組件：提供了一套完整的標準 QTableView 函數和傳統組件無法實現的獨特功能。使您能夠將不同來源的各類數據加載到一個快速、靈活且功能強大的可編輯網格中，支持排序、分組、報告、創建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍色調色板完全支持 Visual Studio 2019 主題！

Qt技術交流群：166830288      歡迎一起進群討論