将 UI 项目转换为应用程序

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

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

有关集成 QML 和 C++ 的更多信息，请参阅概述 - QML 和 C++ 集成。

注意：自 Qt Design Studio 2.3.0 版起，Qt Design Studio 项目向导模板生成的项目可以与 CMake 一起构建。您可以在 Qt Creator 中打开 CMakeLists.txt 项目文件以继续开发项目。此外，您还可以使用 Qt Creator 创建可在 Qt Design Studio 中打开的 Qt Quick 应用程序项目。

注意：自 Qt Design Studio 3.9.0 版起，Qt Design Studio 项目向导模板生成的项目将自动从 Qt 代码审查中签出并使用 CMake 构建 Qt Quick Studio Components。要关闭此功能，请在 CMake 配置中使用选项 BUILD_QDS_COMPONENTS。

有关使用 Qt Design Studio 创建项目的更多信息，请参阅 Qt Design Studio 手册。

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

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

向导自动将 QML_IMPORT_PATH 选项添加到项目文件，用于指定所需的 QML 导入路径。只有当包含 QML 文件的子目录超过一个时，路径才是必需的。

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

在您安装 Qt Design Studio 时会安装 Qt Quick Designer Components 模块。如果您想在 Qt Creator 中编辑的项目中使用此模块中的 Qt Quick Studio Components 或 Effects，您必须构建此模块并将其安装到您的 Qt 中，以便能够构建您的项目。有关更多信息，请参阅将 Qt Quick Designer Components 添加到 Qt 安装程序。

在您安装 Qt Design Studio 时会安装 Qt Quick Timeline 模块。如果您仅安装 Qt Creator 和 Qt，请记住也要选择 Qt Quick Timeline 模块进行安装。如果您的 Qt 版本低于 5.14，您必须构建 Qt Quick Timeline 模块并将其安装到您的 Qt 中，以便能够构建您的项目。

转化为 qmake 项目

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

选择文件 > 新建项目 > 应用程序（Qt） > Qt Quick 应用程序 > 选择。
在 构建系统 字段中，选择作为构建和运行项目所使用的构建系统 qmake，然后选择 下一步（或 macOS 上的继续）。
遵循向导的说明创建项目。
在文件资源管理器中，将 Qt Quick UI 项目目录中的源文件复制到应用程序项目目录的子目录中。在此说明中，目录被称为 qml。
打开应用程序项目文件，并编辑 RESOURCES 选项的值，以添加以下行
```
RESOURCES += \
    $$files(qml/*)
```
同时也要编辑 QML_IMPORT_PATH 选项的值，以指定 QML 导入路径
```
QML_IMPORT_PATH = qml/imports
```
其中 qml/imports 是导入路径。
选择构建 > 运行 qmake 以应用 RESOURCES 选项到构建配置。

打开 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 文件的路径和名称。

选择构建 > 运行以构建和运行您的项目。

注意：如果收到与模块相关的错误信息，请执行将 Qt Quick Designer Components 添加到 Qt 安装程序中描述的步骤。

例如，如果您将 Qt Design Studio 安装中的 ProgressBar 示例的源文件（位于 \share\qtcreator\examples\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 组件模块作为应用程序的一部分默认安装。您也可以手动安装该模块。

例如

克隆模块存储库。

git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git

安装 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 Quick UI 原型。

参考