简述

要开发 QML 程序，首先要选择一款合适的工具。Qt Creator 作为 Qt 开发的首选工具，当然，也可用于 Qt Quick。

在使用 Qt Creator 创建 Qt Quick 项目时有很多模版及类别，下面进行一一讲解！

| 版权声明：一去、二三里，未经博主允许不得转载。

创建 Qt Quick 项目

从头开始创建新的 Qt Quick 项目时，有以下选项：

创建 Qt Quick 项目_Qt-Quick

  • Qt Quick Application：创建一个可以包含 QML 和 C++ 代码的 Qt Quick 2 应用程序项目。该项目包括一个 QQuickView。你可以构建应用程序并将其部署到桌面、嵌入式和移动目标平台。
  • Qt Quick Controls 2 Application 和 Qt Quick Controls Application：类似于 Qt Quick Application，但使用 Qt Quick Controls 2（需要 Qt 5.7 或更高版本）或 Qt Quick Controls。
  • Qt Canvas 3D Application：创建一个 Qt Quick 应用程序，导入 Qt Canvas 3D 模块，并可选择包括​​three.js​​（JavaScript 3D 库，封装了底层的 WebGL 图形接口，提供简化、高效的三维图形程序开发）。
  • Qt Quick UI（在“其他项目”类别中）：创建一个 Qt Quick UI 项目，其中带有一个包含主视图的 QML 文件。可以在预览工具中查看 Qt Quick UI 项目，而无需构建它们。它们不包含任何 C++ 代码。
  • Qt Quick Controls UI：类似于 Qt Quick UI，但使用 Qt Quick Controls。
  • Qt Quick Extension Plugins（在“Library”类别中）：创建 C++ 插件，使得可以提供动态加载到 Qt Quick 应用程序的扩展。选择 Qt Quick 1 Extension Plugin 或 Qt Quick 2 Extension Plugin 可以为 Qt Quick 1 或 Qt Quick 2 应用程序创建扩展。

创建 Qt Quick 应用程序

  2. 选择：文件 -> 新建文件或项目 -> Application -> Qt Quick Application 或 Qt Quick Controls Application，选择。

    3. 创建 Qt Quick 项目_Qt移动开发_02

  4. 设置项目的名称及其所创建的路径，一般情况下，为了便于管理，项目路径不会频繁的发生变化，建议勾选“设为默认的项目路径”复选框。

    5. 创建 Qt Quick 项目_QML_03

  6. 对于某些 Qt Quick 应用程序，必须在“Minimal required Qt version”中选择要开发的 Qt 版本。Qt 版本确定在 QML 文件中使用的 Qt Quick 导入。

    7. 创建 Qt Quick 项目_QtQuick_04

  7. 注意：对于某些 Qt Quick 应用程序，可以选择“With .ui.qml file”复选框以创建可以包含 QML 语言的子集的 UI 表单。与 Qt Designer 的 UI 表单类似，建议使用 Qt Quick Designer 编辑 UI 表单。
    对于某些 Qt Quick 应用程序，还可以选中“Enable native styling”复选框。Qt Creator 向 .pro 文件添加了 Qt Widgets 模块的依赖。
  9. 选择用于运行和构建项目的“kits”，然后单击下一步。

    10. 创建 Qt Quick 项目_QtQuick_05

  10. 注意：如果已在“工具 -> 选项 -> 构建和运行 -> 构建套件”中指定了套件，则会列出套件。
  12. 查看项目设置，然后单击完成以创建项目。

    13. 创建 Qt Quick 项目_QML_06

  14. 编译运行

    15. 创建 Qt Quick 项目_QML_07

  15. 注意：这里选择的是桌面环境，如果要在移动设备上运行，可以直接使用真机，或者模拟器，这部分内容在后面章节再做分享。

创建 Qt Quick UI 项目

  1. 选择：文件 -> 新建文件或项目 -> 其他项目 -> Qt Quick UI 或 Qt Quick Controls UI，选择。
  2. 在“Minimal required Qt version”字段中选择要开发的 Qt 版本。Qt 版本确定在 QML 文件中使用的 Qt Quick 导入。
    可以稍后添加导入，以将 Qt Quick 基本类型与 Qt Quick Controls、Qt Quick Dialogs 和 Qt Quick Layouts（自 Qt 5.1 起可用）组合。
  3. 选中“With .ui.qml file”复选框以创建 UI 表单。

其他步骤同“创建 Qt Quick 应用程序”部分类似，完成之后运行项目。

创建 Qt Quick 项目_Qt移动开发_08

Qt Creator 创建以下文件：

  • .qmlproject 项目文件：定义项目文件夹中的所有 QML、JavaScript 和图像文件都属于项目。因此，不需要单独列出项目中的所有文件。
  • .qml 文件：定义了一个 UI 项目，例如组件，屏幕或整个应用程序 UI。
  • ui.qml 文件：定义了应用程序 UI 的窗体。如果选择了“With .ui.qml file”复选框，则会创建此文件。

要在应用程序中使用 JavaScript 和图像文件，请将它们复制到项目文件夹。