Building a QML application

构建QML应用程序

In Building a C++ console application we showed the CMakeLists.txt file for a simple console application. We will now extend it to create a QML application that uses the Qt Quick module.

​在构建C++控制台应用程序时，我们展示了CMakeLists.txt文件。生成一个简单的控制台应用程序。现在，我们将对其进行扩展，以创建一个使用Qt Quick模块的QML应用程序。

This is the full project file:

这是完整的项目文件：

cmake_minimum_required(VERSION 3.16)

project(hello VERSION 1.0 LANGUAGES CXX)

set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 6.2 COMPONENTS Quick Gui REQUIRED)

qt_add_executable(myapp
    main.cpp
)

qt_add_qml_module(myapp
    URI hello
    VERSION 1.0
    QML_FILES
        main.qml
        FramedImage.qml
    RESOURCES
        img/world.png
)

target_link_libraries(myapp PRIVATE Qt6::Gui Qt6::Quick)

Let's walk through the changes we have made. We specify CMAKE_AUTOMOC, CMAKE_CXX_STANDARD, and CMAKE_CXX_STANDARD_REQUIRED.

​让我们浏览一下我们所做的更改。我们指定CMAKE_AUTOMOC、CMAKE_CXX_STANDARD和CMAKE_CXX_STANDARD_REQUIRED。

set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

In the find_package call, we replace Core with Quick. This will locate the Qt6Quick module and provide the Qt6::Quick targets we later link against.

在find_package调用中，我们用Quick替换Core。这将定位Qt6Quick模块，并提供我们稍后链接的Qt6::Quick目标。

find_package(Qt6 6.2 COMPONENTS Quick Gui REQUIRED)

Note that the application will still link against Qt6::Core, because Qt6::Quick depends on it.

请注意，应用程序仍将链接到Qt6::Core，因为Qt6::Quick依赖于它。

qt_add_executable creates and finalizes an application target:

qt_add_executable创建并最终确定应用程序目标：

qt_add_executable(myapp
    main.cpp
)

qt_add_qml_module passes the target of the executable, a URI, module version, and a list of QML files to ensure that myapp becomes a QML module. Among other things, this places the QML files into qrc:/${URI} in the resource file system.

qt_add_qml_module传递可执行文件的目标、URI、模块版本和qml文件列表，以确保myapp成为qml模块。除其他外，这将QML文件放入资源文件系统中的qrc://${URI}。

qt_add_qml_module(myapp
    URI hello
    VERSION 1.0
    QML_FILES
        main.qml
        FramedImage.qml
    RESOURCES
        img/world.png
)

First, qt_add_qml_module ensures that qmlcachegen runs. Second, it creates a myapp_qmllint target, which runs qmllint on the files in QML_FILES.

首先，qt_add_qml_module确保qmlcachegen运行。其次，它创建了一个myapp_qmlint目标，在QML_FILES中的文件上运行qmlint。

By adding the referenced resources, they get automatically added to the application under the same root path as the QML files – also in the resource file system. By keeping the path in the resource system consistent with the one in the source and build directory, we ensure that the image is always found, as it is resolved relative to FramedImage.qml. It refers to the image in the resource file system if we load main.qml from there, or to the one in the actual file system if we review it with the qml tool.

通过添加引用的资源，它们会自动添加到与QML文件相同的根路径下的应用程序中——也在资源文件系统中。通过保持资源系统中的路径与源和构建目录中的路径一致，我们可以确保始终找到映像，因为它是相对于FramedImage.qml解析的。如果我们在main.qml中加载它，则它指向的是资源文件。或者使用qml工具查看实际文件系统中的qml。

In the target_link_libraries command, we link against Qt6::Quick instead of Qt6::Core.

在target_link_libraries命令中，我们链接Qt6::Quick，而不是Qt6::Core。

target_link_libraries(myapp PRIVATE Qt6::Gui Qt6::Quick)