QML-1- qml简介及项目创建

news2024/9/23 1:24:36

文章目录

1. QML 简介
2. 项目创建
3. 目录结构
4. CMakeLists.txt 简单介绍
5. 运行demo

1. QML 简介

根据官网介绍，qml 为qt一个模块，使用Qml语言开发应用程序和库提供了一个框架。它定义并实现了语言和引擎基础结构，并提供了一个API，使应用程序开发人员能够注册自定义QML类型和模块，并将QML代码与JavaScript和c++集成在一起。Qt Qml模块提供了Qml API和c++ API。
简单来说就是其集成了一个JS引擎，可以实现c++和js互调，使用ji的方式来声明式构建图形界面。

官网文档地址：https://doc.qt.io/all-topics.html

2. 项目创建

选择Qt Quick 应用
在这里插入图片描述
输入项目名，选择项目创建路径

这里构建工具使用CMake, 既然官方都放弃qmake使用cmake了，那就使用cmake
在这里插入图片描述
选择你需要的版本，没需求就选最新

next

这里不需要版本控制的话直接选None

3. 目录结构

在这里插入图片描述

CMakeLists.txt：
位于项目根目录下。这是CMake的配置文件，用于定义如何构建你的项目。包括指定项目名称、版本、源文件、依赖项、编译选项等。
源代码目录（上例QML_demo1)
- Source Files
  存放C++源代码文件。
- qml.qrc
  qml文件存放目录，
CMake Modules
项目用到的其他一些CMake模块

4. CMakeLists.txt 简单介绍

# 1、 设置 CMake 变量
cmake_minimum_required(VERSION 3.14)    # CMake最低版本

project(QML_demo1 VERSION 0.1 LANGUAGES CXX)       # 项目版本0.1，编程语言C++

set(CMAKE_INCLUDE_CURRENT_DIR ON)       # 确保编译器在当前源文件的目录中查找包含的头文件

# 自动处理(自动执行) Qt 的 uic、moc 和 rcc 文件。这通常是必要的
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

# 设置 C++ 标准为 C++17，并强制要求该标准
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# 2、查找 Qt 包
# 尝试先查找 Qt6，如果找不到则查找 Qt5。这里指定了需要 Core 和 Quick 组件
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core Quick)
# 基于先前找到的 Qt 版本（Qt5 或 Qt6），再次查找并确认需要的组件
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Quick)

# 3. 定义项目源文件
# 设置项目源文件列表，包括 C++ 源文件和 QML 资源文件
set(PROJECT_SOURCES
        main.cpp
        qml.qrc
)

# 4、 根据项目类型和 Qt 版本创建目标：
# 对于 Qt 6，使用 qt_add_executable 创建一个可执行文件。
# 对于 Qt 5，如果目标平台是 Android，则创建一个共享库；否则，创建一个可执行文件
if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
    qt_add_executable(QML_demo1
        MANUAL_FINALIZATION
        ${PROJECT_SOURCES}
    )
# Define target properties for Android with Qt 6 as:
#    set_property(TARGET QML_demo1 APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
#                 ${CMAKE_CURRENT_SOURCE_DIR}/android)
# For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation
else()
    if(ANDROID)
        add_library(QML_demo1 SHARED
            ${PROJECT_SOURCES}
        )
# Define properties for Android with Qt 5 after find_package() calls as:
#    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
    else()
        add_executable(QML_demo1
          ${PROJECT_SOURCES}
        )
    endif()
endif()

# 5、 链接库：
# 将 Qt 的 Core 和 Quick 组件链接到可执行文件
target_link_libraries(QML_demo1
  PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick)

# 6、 设置目标属性：
# 对于 macOS，设置 bundle 相关的属性
set_target_properties(QML_demo1 PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

# 7、 安装目标：
# 使用 install 命令指定如何安装构建的目标。对于 macOS bundle，它将被安装到根目录；对于库，它将被安装到 ${CMAKE_INSTALL_LIBDIR} 指定的目录
install(TARGETS QML_demo1
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})
#8、 Qt 6 特定的步骤：
# qt_import_qml_plugins(QML_demo1)：对于 Qt 6，确保 QML 插件被正确导入到可执行文件中。
# qt_finalize_executable(QML_demo1)：对于 Qt 6，确保所有 Qt 相关的资源（如 QML、翻译等）都被正确地包含在可执行文件中。
if(QT_VERSION_MAJOR EQUAL 6)
    qt_import_qml_plugins(QML_demo1)
    qt_finalize_executable(QML_demo1)
endif()