Qt创建移动应用程序

Posted on by

目录：

本教程描述了使用 Qt Quick Controls 为 Android 和 iOS 设备开发 Qt Quick 应用程序。我们使用 Qt Creator 实现了一个 Qt Quick 应用程序，该应用程序根据不断变化的加速度计值加速 SVG（可缩放矢量图形）图像。

设置开发环境

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

为Android设备开发，必须下载并安装最新的Android NDK和SDK，并更新SDK以获得开发所需的API和工具。此外，您必须安装 Java SE Development Kit (JDK) 和 Apache Ant。安装完所有这些工具后，您必须在 Qt Creator 中指定它们的路径。有关详细说明，请参阅Qt for Android和连接 Android 设备。

要为 iOS 设备开发，您必须安装 Xcode 并使用它来配置设备。为此，您需要从 Apple 收到的 Apple 开发者帐户和 iOS 开发者计划证书。有关更多信息，请参阅连接 iOS 设备。

创建项目

  1. 选择文件>新建文件或项目>应用程序> Qt Quick Application >选择.
  2. 在名称字段中，输入accelbubble。
  3. 在Create in字段中，输入项目文件的路径。例如，C:\Qt\examples，然后单击下一步（或在 OS X 上继续）。
  4. 在Qt Quick 组件集字段中，选择Qt Quick Controls 1.1。
  5. 选择适用于 Android ARM 和 iPhone OS 的套件，然后单击Next。注意：如果在Tools > Options > Build & Run > Kits（在 Windows 和 Linux 上）或在Qt Creator > Preferences Build & Run > Kits（在 OS X 上）中指定了工具包，则会列出它们。
  6. 在以下对话框中选择下一步以使用默认设置。
  7. 检查项目设置，然后单击完成（或在 OS X 上完成）。

Qt Creator 会生成一个默认的 QML 文件，您可以修改该文件以创建应用程序的主视图。

创建主视图

应用程序的主视图在主窗口的中心显示一个 SVG 气泡图像。

要在您的项目中使用 Qt Sensors 示例 Accel Bubble 使用的 Bluebubble.svg，您必须将其从 Qt 安装目录中的示例目录复制到项目目录（与 QML 文件相同的子目录）。例如：C:\Qt\Qt5.2.0\5.2.0\msvc2010\examples\sensors\accelbubble\content。图像出现在Resources中。您也可以使用任何其他图像或 QML 类型来代替。

  • 在Projects视图中，双击 main.qml 文件以在代码编辑器中打开它。
  • 修改ApplicationWindow类型的属性以指定应用程序名称，给ApplicationWindow一个 id，并将其设置为可见，如以下代码片段所示：
ApplicationWindow {
    title: qsTr("Accelerate Bubble")
    id: mainWindow
    width: 640
    height: 480
    visible: true

}
  • 单击设计以在 Qt Quick Designer 中打开文件。
  • 在Navigator中，选择Label并按Delete将其删除。
  • 在Library > Resources中，选择 Bluebubble.svg 并将其拖放到画布上。
  • 在“属性”窗格的Id字段中，输入气泡以便能够从其他位置引用图像。
  • 在代码编辑器中，为图像添加以下新属性，以在应用程序启动时将图像定位在ApplicationWindow的中心：
    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 和 y 位置：
    ...
        x: centerX - bubbleCenter
        y: centerY - bubbleCenter

}

以下是您进行更改后 accelbubble.qml 文件的外观：

import QtQuick 2.2
import QtQuick.Controls 1.1


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

    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

}

移动气泡Bubble

现在视觉元素已经到位，让我们根据加速度计传感器值移动气泡。

  • 将以下导入语句添加到 main.qml：
import QtSensors 5.0
  • 添加具有必要属性的Accelerometer类型： 
    Accelerometer {
        id: accel
        dataRate: 100
        active:true

        }
  • 添加以下 JavaScript 函数，这些函数根据当前的 Accelerometer 值计算气泡的 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 代码，以使气泡在 Accelerometer 值更改时移动： 
        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
        }
  • 我们要确保气泡的位置始终在屏幕范围内。如果加速度计返回的不是数字 (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 中指定它。有关详细信息，请参阅编辑清单文件。

在 iOS 上，您可以在 Info.plist 文件中锁定设备方向，您在 .pro 文件中将其指定为QMAKE_INFO_PLIST变量的值。

添加依赖项

使用以下库依赖信息更新 accelbubble.pro 文件：

QT += quick sensors svg xml

在 iOS 上，您必须通过显式添加插件名称作为 QTPLUGIN 变量的值来静态链接到上述库。为 iOS 构建指定一个 qmake 范围（也可以包含QMAKE_INFO_PLIST变量）：

ios {
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}

添加依赖后，选择Build > Run qmake将更改应用到项目的 Makefile。

添加资源

您需要将 Bluebubble.svg 图像文件添加到应用程序资源以部署到移动设备：

  1. 在Projects视图中，双击 qml.qrc 文件以在资源编辑器中打开它。
  2. 选择添加以添加 Bluebubble.svg。

运行应用程序

应用程序已完成并准备好部署到设备：

  1. 在 Android 设备上启用USB 调试或在 iOS 设备上启用开发者模式。
  2. 将设备连接到开发 PC。如果您使用的是运行 Android v4.2.2 的设备，它应该会提示您验证连接以允许从它所连接的 PC 进行 USB 调试。为避免每次连接设备时出现此类提示，请选中“始终允许来自计算机”并选择“确定” 。
  3. 要在设备上运行应用程序，请按Ctrl+R。

示例代码

完成这些步骤后，main.qml 文件应如下所示：

import QtQuick 2.2
import QtQuick.Controls 1.1

import QtSensors 5.0

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

    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

        Behavior on y {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
                }
            }
        Behavior on x {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
                }
            }
    }
    Accelerometer {
        id: accel
        dataRate: 100
        active:true

        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
        }
    }

    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);
    }

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
}

推荐阅读：

分类： C++标签：