教程：移动应用程序

如何创建一个使用Qt Quick Controls 并可在 Android 和 iOS 设备上运行的Qt Quick 应用程序。

本教程介绍在使用 Qt 6 作为最低 Qt 版本和 CMake 作为构建系统时，如何使用Qt Creator 为 Android 和 iOS 设备开发Qt Quick 应用程序。

您将开发一个Qt Quick 应用程序，该程序可根据加速度计值的变化加速 SVG（可缩放矢量图形）图像。

注意： 您必须拥有 Qt Sensors模块才能学习本教程。

加速气泡示例

设置开发环境

要在移动设备上构建并运行应用程序，必须为设备平台设置开发环境，并配置Qt Creator 与移动设备之间的连接。

要为 Android 设备开发，必须安装Qt for Android并设置开发环境，具体方法请参阅 "为 Android 开发"。

要为 iOS 设备开发，必须安装 Xcode 并使用它配置设备。为此，您需要一个 Apple 开发者账户和从 Apple 获得的 iOS Developer Program 证书。有关详细信息，请参阅为 iOS 开发。

创建项目

转到File >New Project >Application (Qt) > Qt Quick Application.
选择Choose ，打开Project Location 对话框。
在Name 中，输入应用程序的名称。为自己的项目命名时，请注意以后不能轻易重命名。
在Create in 中，输入项目文件的路径。以后可以移动项目文件夹。
选择Next 打开Define Project Details 对话框。
选择Next ，打开Kit Selection 对话框。
为要构建应用程序的平台选择 Qt 6.5 或更高版本的工具包。要为移动设备构建应用程序，请同时选择 Android 和 iOS 的工具包。

注：列表显示的是在首选项>Kits 中指定的工具包。更多信息，请参阅添加工具包和工具包。
选择Next ，打开Project Management 对话框。
查看项目设置，然后选择Finish （或 macOS 上的Done ）创建项目。

将图像添加为资源

应用程序的主视图会显示 SVG 气泡图像，当您倾斜设备时，该图像会在屏幕上移动。

要在运行应用程序时显示图像，必须在向导为您创建的CMakeLists.txt文件的RESOURCES 部分将其指定为资源：

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

创建 Accelbubble 主视图

在main.qml文件中创建主视图，方法是添加一个以Bluebubble.svg为源代码的图像组件：

    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 函数，根据当前加速度计值计算气泡的 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;
    }

添加以下 JavaScript 代码，用于onReadingChanged Accelerometer 组件的信号，使气泡在 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
            }
        }

锁定设备方向

当设备方向在纵向和横向之间变化时，设备显示屏默认是旋转的。在本例中，屏幕方向最好是固定的。

要在 Android 上将方向锁定为纵向或横向，可在Qt Creator 生成的AndroidManifest.xml中指定。更多信息，请参阅编辑清单文件。

Accelbubble 清单文件

要生成并使用清单文件，必须在CMakeLists.txt文件中指定 Android 软件包源代码目录QT_ANDROID_PACKAGE_SOURCE_DIR ：

set_property(TARGET appaccelbubble APPEND PROPERTY
    QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
)

为了与 3.19 以上版本的 CMake 兼容，请在qt_add_executable 函数中添加一个手动定稿步骤：

qt_add_executable(appaccelbubble
    main.cpp
    MANUAL_FINALIZATION
)

然后，添加qt_finalize_executable 函数：

qt_finalize_executable(appaccelbubble)

在 iOS 上，你可以在Info.plist文件中锁定设备方向，并在CMakeLists.txt文件中指定MACOSX_BUNDLE_INFO_PLIST 变量的值：

set_target_properties(appaccelbubble PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE_INFO_PLIST "${CMAKE_CURRENT_SOURCE_DIR}/Info.plist"
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

添加依赖项

你必须通过在项目文件中指定依赖关系，告诉构建系统你的应用程序需要哪些 Qt 模块。选择Projects ，用以下 Qt 模块信息更新 CMake 配置：Sensors,Svg,Xml 。

CMakeLists.txt文件应包含以下条目，告诉 CMake 查找 Qt 安装并导入应用程序所需的Qt Sensors 、Qt SVG 和Qt XML 模块：

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Sensors Svg Xml)

您还需要将 Qt 模块添加到目标链接库列表中。target_link_libraries 通过引用find_package() 调用导入的目标，告诉 CMake accelbubble 可执行文件使用Qt Sensors 、Qt SVG 和Qt XML 模块。这将为链接器添加必要的参数，并确保将适当的包含目录和编译器定义传递给 C++ 编译器。

target_link_libraries(appaccelbubble
    PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg Qt6::Xml)

添加依赖关系后，选择Build >Run CMake 以应用配置更改。

有关 CMakeLists.txt 文件的更多信息，请参阅CMake 入门。

注意： 如果您尚未安装find_package() 中列出的所有 Qt 模块，Qt Creator 会询问您是否要通过Qt Online Installer 安装这些模块。

运行应用程序

现在可以将应用程序部署到设备上：

在 Android 设备上启用USB 调试，或在 iOS 设备上启用开发者模式。
将设备连接到开发电脑。
如果您使用的是运行 Android v4.2.2 的设备，它应该会提示您验证连接以允许从 PC 进行 USB 调试。为避免每次连接设备时都出现此类提示，请选择Always allow from this computer 复选框，然后选择OK 。
要在设备上运行应用程序，请选择Ctrl+R。

文件：

教程如何

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.