将 UI 项目转换为应用程序

Qt Quick UI 原型项目用于创建用户界面。要在 Qt Creator 中使用它们进行应用程序开发,您必须添加

  • 项目配置文件(CMakeLists.txt 或 .pro)
  • C++ 代码(.cpp)
  • 资源文件
  • 部署到 设备 所需的代码

有关 QML 和 C++ 集成的更多信息,请参见 概览 - QML 和 C++ 集成

注意:从 Qt 设计工作室 2.3.0 开始,Qt 设计工作室项目向导模板生成的项目可以使用 CMake 构建。您可以在 Qt Creator 中打开 CMakeLists.txt 项目文件以继续开发项目。此外,您还可以使用 Qt Creator 创建一个 Qt Quick 应用程序项目,然后在 Qt 设计工作室中打开。

注意:从 Qt 设计工作室 3.9.0 开始,Qt 设计工作室项目向导模板生成的项目可以自动从 Qt 代码审查 检出和构建 Qt Quick Studio 组件,使用 CMake。要关闭此功能,请在 CMake 配置中使用选项 BUILD_QDS_COMPONENTS

有关更多信息,请参阅 设计师-开发者工作流

如果您想使用 qmake 作为构建系统,您可以使用 Qt Creator 向导模板创建一个 Qt Quick 应用程序,该应用程序使用 qmake 构建系统构建,然后将 Qt UI Quick 项目的源文件复制到应用程序项目中。

您可以在项目配置文件中使用 RESOURCES 选项自动将所有 QML 文件和相关资产添加到 Qt 资源收集文件 (.qrc)。但是,大文件应包含为外部二进制资源,而不是编译到二进制文件中。

向导会自动将 QML_IMPORT_PATH 选项添加到项目文件,用于指定所需的 QML 导入路径。如果多个子目录包含 QML 文件,则需要此路径。

然后您可以在主 C++ 源文件中使用 QQuickView 类,在应用程序启动时显示主 QML 文件。

在安装 Qt Design Studio 时,会安装 Qt Quick 设计器组件 模块。如果您想在使用 Qt Creator 编辑的项目中使用模块中的 Qt Quick Studio 组件或效果,您必须构建该模块并将其安装到您的 Qt 中,才能构建项目。有关更多信息,请参阅将 Qt Quick 设计器组件添加到 Qt 安装

当您安装 Qt Design Studio 时,会安装 Qt Quick 时间轴 模块。如果您仅安装 Qt Creator 和 Qt,记得也要选择安装 Qt Quick 时间轴模块。如果您的 Qt 低于 5.14,您必须构建 Qt Quick 时间轴模块并将其安装到您的 Qt 中,才能构建项目。

转换成 qmake 项目

将具有 .qmlproject 文件的项目转换为具有 .pro 文件的项目

  1. 选择 文件 > 新建项目 > 应用程序(Qt) > Qt Quick 应用程序 > 选择
  2. 构建系统 字段中,选择作为构建和运行项目的构建系统使用 qmake,然后选择 下一步(或在 macOS 上选择 继续)。
  3. 按照向导的说明创建项目。
  4. 在文件浏览器中,将源文件从 Qt Quick UI 项目目录复制到应用程序项目目录的子目录中。在本说明中,该目录称为 qml
  5. 打开应用程序项目文件,并将 RESOURCES 选项的值修改为添加以下行
    RESOURCES += \
        $$files(qml/*)
  6. 还编辑 QML_IMPORT_PATH 选项的值以指定 QML 导入路径
    QML_IMPORT_PATH = qml/imports

    其中 qml/imports 是导入路径。

  7. 选择 构建 > 运行 qmake 以将 RESOURCES 选项应用于构建配置。
  8. 打开 main.cpp 文件,并将 QQmlApplicationEngine 对象替换为 QQuickView 对象
        QQuickView view;
        view.engine()->addImportPath("qrc:/qml/imports");
        view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
        if (!view.errors().isEmpty())
            return -1;
        view.show();

    其中 qrc:/qml/imports 是导入路径,而 qrc:/qml/ProgressBar.ui.qml 是 Qt Quick UI 项目中的主 QML 文件的路径和名称。

  9. 选择 构建 > 运行 以构建和运行项目。

    注意:如果您收到有关模块的错误消息,请执行将 Qt Quick 设计器组件添加到 Qt 安装中描述的步骤。

例如,如果您将来自您的 Qt Design Studio 安装(位于 \share\qtcreator\examples\ProgressBar 目录)的 ProgressBar 示例的源文件复制到空的 Qt Quick 应用程序项目,并进行必要的更改,则 main.cpp 文件应如下所示

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQuickView view;
    view.engine()->addImportPath("qrc:/qml/imports");
    view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
    if (!view.errors().isEmpty())
        return -1;
    view.show();

    app.exec();
}

处理大容量数据文件

UI 中使用的图形资产,如图像、效果或 3D 场景,是 UI 中性能问题的常见原因。如果尝试将大型资产文件(如 100-MB 的 3D 模型或 64-MB 的纹理)包含到 .qrc 文件中以编译到二进制中,则构建应用程序也需要大量内存。

首先尝试根据 优化设计创建优化的 3D 场景 中的说明优化您的资产。

如果您确实需要大型资源,它们应该直接从文件系统加载,或者以动态方式使用 Qt 资源系统。更多详细信息,请参阅 Qt 文档中的 Qt 资源系统

添加自定义字体

要从 Qt Quick UI 项目中 使用自定义字体,请从 main.cpp 文件中调用 QFontDatabase::addApplicationFont() 函数。

将 Qt Quick 设计器组件添加到 Qt 安装中

从 Qt Design Studio 3.9版本开始,Qt Quick Studio 组件模块作为应用程序的一部分默认安装。您也可以手动安装此模块。

例如

  1. 克隆模块仓库。
    git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git
  2. 安装 Qt Quick 设计器组件模块。输入以下命令
    mkdir build
    cd build
    cmake -GNinja -DCMAKE_INSTALL_PREFIX=<path_to_qt_install_directory> <path_to_qtquickdesigner-components>
    cmake --build .
    cmake --install .

    注意:在此,<path_to_qt_install_directory><path_to_qtquickdesigner-components> 需要替换为您本地驱动器上的实际位置。例如,<path_to_qt_install_directory> 可能是类似 /Qt/6.3.0/msvc2019_64 的内容,而 <path_to_qtquickdesigner-components> 可能类似于 ../qtquickdesigner-components/

根据某些 Qt 许可可获得。
了解更多信息。