将用户界面项目转换为应用程序

Qt Quick 用户界面原型项目可用于创建用户界面。要将它们用于 中的应用程序开发，必须添加以下内容：Qt Creator

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

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

有关使用Qt Design Studio 创建项目的更多信息，请参阅Qt Design Studio 文档。要使用 qmake 作为构建系统，请使用Qt Creator 向导模板创建一个使用 qmake 构建系统构建的Qt Quick 应用程序，然后将 Qt UI Quick 项目中的源文件复制到应用程序项目中。

你可以使用项目配置文件中的RESOURCES 选项，将所有 QML 文件和相关资产自动添加到Qt 资源集合文件（.qrc）中。不过，大文件应作为外部二进制资源包含，而不是编译到二进制文件中。

向导会自动在项目文件中添加QML_IMPORT_PATH 选项，用于指定所需的QML 导入路径。只有在多个子目录都有 QML 文件时，才需要指定路径。

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

在安装Qt Design Studio 时，会安装Qt Quick Studio Components模块。如果您在一个项目中使用Qt Quick Studio Components 或该模块中的 Effects，而您又想在Qt Creator 中进行编辑，您就必须构建该模块并将其安装到您的 Qt XML 中，以便能够构建您的项目。欲了解更多信息，请参阅将Qt Quick Studio 组件添加到 Qt 安装中。

Qt Quick Timeline模块会在安装Qt Design Studio 时安装。如果您只安装Qt Creator 和 Qt，请记得同时选择Qt Quick Timeline 模块进行安装。如果您的 Qt 早于 5.14，则必须构建Qt Quick Timeline 模块并将其安装到您的 Qt 中，才能构建您的项目。

转换为 qmake 项目

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

1. 选择File >New Project >Application (Qt) > > 。 Qt Quick Application>Choose 。
2. 在Build system 字段中，选择qmake作为构建和运行项目时使用的构建系统，然后选择Next （或 macOS 上的Continue ）。
3. 按照向导的指示创建项目。
4. 在文件资源管理器中，将源文件从Qt Quick UI 项目目录复制到应用程序项目目录中的一个子目录。在本说明中，该目录名为qml 。
5. 打开应用程序项目文件，编辑RESOURCES 选项的值，添加以下一行：

   RESOURCES += \
       $$files(qml/*)

6. 同时编辑QML_IMPORT_PATH 选项的值，指定 QML 导入路径：

   QML_IMPORT_PATH = qml/imports

   其中qml/imports 是导入路径。

7. 选择Build >Run 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. 选择Build >Run ，构建并运行项目。

   注意： 如果收到与模块有关的错误信息，请执行在将Qt Quick Studio 组件添加到 Qt 安装中所述的步骤。

例如，如果将ProgressBar示例的源文件从Qt Design Studio 安装（位于\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();
}

处理大型数据文件

用户界面中使用的 Graphical 资产（如图像、效果或 3D 场景）是造成用户界面性能问题的典型原因。如果尝试在.qrc 文件中包含大型资产文件（如 100MB 的 3D 模型或 64MB 的纹理），以便将其编译为二进制文件，那么即使是构建应用程序也需要大量内存。

首先尝试优化资产，如优化设计和创建优化 3D 场景中所述。

大型资产应直接从文件系统加载，或使用 Qt 资源系统动态加载。有关详细信息，请参阅Qt 资源系统。

在 Qt 安装中添加Qt Quick Studio 组件

自Qt Design Studio 3.9 起，默认安装Qt Quick Studio Components 模块，作为使用Qt Design Studio 创建的应用程序的一部分。您也可以手动安装该模块。

例如

1. 克隆模块库。

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

2. 安装Qt Quick Studio Components 模块。

   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/。