QML FluentUI

https://github.com/zhuzichu520/fluentui
Admin
QML FluentUI is a Fluent Design component library for Qt QML that provides a beautiful set of UI...
Tokens:92,332
Snippets:629
Trust Score:8.3
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Qt6.2+ library and QML module setup

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Uses qt_add_library and qt_add_qml_module for Qt 6.2+, setting the module URI and type info file.

```cmake
if (QT_VERSION VERSION_GREATER_EQUAL "6.2")
    #如果是Qt6.2版本以上，则使用qt_add_library，qt_add_qml_module函数添加资源文件
    if (FLUENTUI_BUILD_STATIC_LIB)
        set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/FluentUI)
    endif ()
    qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
    qt_add_qml_module(${PROJECT_NAME}
            PLUGIN_TARGET ${PLUGIN_TARGET_NAME}
            OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
            VERSION 1.0
            URI "FluentUI"
            #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI 1.0会爆红，所以修改成plugins.qmltypes
            TYPEINFO "plugins.qmltypes"
            SOURCES ${sources_files} ${FLUENTUI_VERSION_RC_PATH}
            QML_FILES ${qml_files}
            RESOURCES ${resource_files}
            RESOURCE_PREFIX "/qt/qml"
    )
else ()
    qt_add_resources(QRC_RESOURCES Qt5/imports/fluentui.qrc)
    #如果是Qt6.2版本以下，则使用add_qmlplugin函数添加资源文件，这是个自定义的函数，详情见.cmake/QmlPlugin.cmake
    include(QmlPlugin)
    add_qmlplugin(${PROJECT_NAME}
            URI "FluentUI"
            VERSION 1.0
            SOURCES ${sources_files} ${FLUENTUI_VERSION_RC_PATH} ${QRC_RESOURCES}
            QMLFILES ${qml_files}
            QMLDIR imports/FluentUI
            BINARY_DIR ${FLUENTUI_QML_PLUGIN_DIRECTORY}
            LIBTYPE ${LIB_TYPE}
    )
endif ()
```

--------------------------------

### Install FluentUI QML plugin directory

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Installs the FluentUI QML plugin directory to CMAKE_INSTALL_PREFIX/imports.

```cmake
#安装
install(DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)
```

--------------------------------

### CMake configuration for FluentUI example project

Source: https://github.com/zhuzichu520/fluentui/blob/main/example/CMakeLists.txt

Configures the build for a Qt application using FluentUI. Handles static library definitions, platform-specific output, Qt dependencies, translation targets, version header generation, source file collection, and linking.

```cmake
cmake_minimum_required(VERSION 3.20)

project(example VERSION 1.0)

#配置通用编译
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

#判断FluentUI库类型
if (FLUENTUI_BUILD_STATIC_LIB)
    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
endif ()

#设置可执行文件输出目录
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})

if (APPLE)
    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
else ()
    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
endif ()

#导入Qt相关依赖包
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network Widgets)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network Widgets)

#添加国际化脚本
find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
find_program(QT_LRELEASE NAMES lrelease lrelease-qt6)
file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
add_custom_target(Script-UpdateTranslations
        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
        COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
        SOURCES ${TS_FILE_PATHS}
)

##生成版本信息头文件
set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
configure_file(
        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
        ${HEADER_FILE_VERSION_PATH}
)

#遍历所有Cpp文件
file(GLOB_RECURSE CPP_FILES *.cpp *.h)
foreach (filepath ${CPP_FILES})
    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
    list(APPEND sources_files ${filename})
endforeach (filepath)

if (WIN32)
    list(APPEND sources_files "src/app_dmp.h")
endif ()

#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
set(EXAMPLE_VERSION_RC_PATH "")
if (WIN32)
    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
    configure_file(
            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
            ${EXAMPLE_VERSION_RC_PATH}
    )
    configure_file(
            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
    )
endif ()

list(APPEND sources_files ${PROJECT_NAME}.qrc)

#添加可执行文件
if (WIN32)
    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
endif ()
if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
    qt_add_executable(${PROJECT_NAME}
            MANUAL_FINALIZATION
            ${sources_files}
    )
else ()
    add_executable(${PROJECT_NAME}
            ${sources_files}
    )
endif ()
add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)

#复制程序运行所需要的动态库
if (WIN32)
    if (MSVC)
        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
        endif ()
    elseif (MINGW)
        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
    endif ()
    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
endif ()

#复制FluentUI源码到运行目录下，用于脚手架生成
file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)

#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
target_include_directories(${PROJECT_NAME} PRIVATE
        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
)

#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
if (FLUENTUI_BUILD_STATIC_LIB)
    target_include_directories(${PROJECT_NAME} PRIVATE
            ${CMAKE_SOURCE_DIR}/src
    )
endif ()

#设置属性
set_target_properties(${PROJECT_NAME} PROPERTIES
        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
        MACOSX_BUNDLE TRUE
        WIN32_EXECUTABLE TRUE
)

#Release也支持日志打印代码位置
target_compile_definitions(${PROJECT_NAME}
        PRIVATE
        QT_MESSAGELOGCONTEXT
)

#目标文件链接库
target_link_libraries(${PROJECT_NAME} PRIVATE
        Qt${QT_VERSION_MAJOR}::Quick
        Qt${QT_VERSION_MAJOR}::Svg
        Qt${QT_VERSION_MAJOR}::Network
	Qt${QT_VERSION_MAJOR}::Widgets
        fluentuiplugin
)
```

--------------------------------

### CMakeLists.txt - FluentUI build configuration

Source: https://github.com/zhuzichu520/fluentui/blob/main/CMakeLists.txt

Configures the FluentUI project build with CMake. Sets minimum CMake version, project name/version, MSVC-specific linker flags for debug symbols, module path, build options for examples and static library, Qt dependencies, and output messages.

```cmake
cmake_minimum_required(VERSION 3.20)

project(FluentUI VERSION 1.0)

if (MSVC)
    #让Release也生成pdb文件
    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
endif ()

list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.cmake/)

include(GetGitRevisionDescription)

option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)

add_subdirectory(src)

#Release也支持日志打印代码位置
target_compile_definitions(fluentuiplugin
        PRIVATE
        QT_MESSAGELOGCONTEXT
)

if (FLUENTUI_BUILD_EXAMPLES)
    add_subdirectory(example)
endif ()

message("------------------------ FluentUI ------------------------")
message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")
```

--------------------------------

### Include QHotkey and set up version resource for Windows

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Adds QHotkey sources to the build and generates a Windows version resource file if on WIN32.

```cmake
include(QHotkey)
list(APPEND sources_files ${QHOTKEY_SOURCES})

if (WIN32)
    set(FLUENTUI_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
    configure_file(
            ${CMAKE_CURRENT_SOURCE_DIR}/.cmake/version_dll.rc.in
            ${FLUENTUI_VERSION_RC_PATH}
    )
endif ()
```

--------------------------------

### Build FluentUI with CMake

Source: https://github.com/zhuzichu520/fluentui/blob/main/README.md

Builds the FluentUI project using CMake and Ninja. Replace <YOUR_QT_SDK_DIR_PATH> with the path to your Qt SDK and <PATH_TO_THE_REPOSITORY> with the path to the cloned repository.

```bash
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
cd FluentUI
mkdir build
cd build
cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <PATH_TO_THE_REPOSITORY>
cmake --build . --config Release --target all --parallel
```

--------------------------------

### Link Qt libraries and QHotkey

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Links Core, Quick, Qml, Widgets, and PrintSupport modules, plus QHotkey if available.

```cmake
#链接库
target_link_libraries(${PROJECT_NAME} PUBLIC
        Qt${QT_VERSION_MAJOR}::Core
        Qt${QT_VERSION_MAJOR}::Quick
        Qt${QT_VERSION_MAJOR}::Qml
        Qt${QT_VERSION_MAJOR}::Widgets
        Qt${QT_VERSION_MAJOR}::PrintSupport
)

if(QHOTKEY_AVAILABLE)
    target_link_libraries(${PROJECT_NAME} PRIVATE ${QHOTKEY_LINK_LIBRARIES})
    target_compile_definitions(${PROJECT_NAME} PRIVATE QHOTKEY_AVAILABLE)
endif()

target_include_directories(${PROJECT_NAME} PRIVATE
    ${CMAKE_CURRENT_SOURCE_DIR}/qmlcustomplot
)
```

--------------------------------

### Qt6-specific source and resource handling

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

For Qt 6.2+, removes Qt5-only files, collects QML and resource files, and adjusts resource aliases.

```cmake
if (QT_VERSION VERSION_GREATER_EQUAL "6.2")
    #删除fluentuiplugin.cpp与fluentuiplugin.h，这些只要Qt5使用，Qt6不需要
    list(REMOVE_ITEM sources_files fluentuiplugin.h fluentuiplugin.cpp)
    if (NOT FLUENTUI_BUILD_STATIC_LIB)
        list(REMOVE_ITEM sources_files FluentUI.h FluentUI.cpp)
    endif ()

    #遍历所有qml文件
    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
    foreach (filepath ${QML_PATHS})
        if (${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
            string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
            if (${filename} MATCHES "qmldir")
                list(APPEND resource_files ${filename})
            else ()
                list(APPEND qml_files ${filename})
            endif ()
        endif ()
    endforeach (filepath)

    #遍历所有资源文件
    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.js *.mjs *.qm)
    foreach (filepath ${RES_PATHS})
        if (${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
            string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
            list(APPEND resource_files ${filename})
        endif ()
    endforeach (filepath)

    #修改资源文件导出路径
    foreach (filepath IN LISTS qml_files resource_files)
        string(REPLACE "Qt${QT_VERSION_MAJOR}/imports/FluentUI/" "" filename ${filepath})
        set_source_files_properties(${filepath} PROPERTIES QT_RESOURCE_ALIAS ${filename})
    endforeach ()
endif ()
```

--------------------------------

### CMake deployment script for macOS and Windows

Source: https://github.com/zhuzichu520/fluentui/blob/main/example/CMakeLists.txt

Adds a custom target 'Script-DeployRelease' that deploys Qt dependencies after a Release build. On macOS it uses macdeployqt, on Windows windeployqt. The script removes the dist directory, copies the runtime output, and runs the deployment tool with platform-specific options.

```cmake
#添加部署脚本
if (CMAKE_BUILD_TYPE MATCHES "Release")
    if (APPLE)
        find_program(QT_DEPLOY_QT NAMES macdeployqt)
        add_custom_target(Script-DeployRelease
                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
                COMMENT "MacOs Deploying Qt Dependencies After Build........."
                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
        )
    endif ()
    if (WIN32)
        find_program(QT_DEPLOY_QT NAMES windeployqt)
        add_custom_target(Script-DeployRelease
                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
                COMMENT "Windows Deploying Qt Dependencies After Build........."
                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
        )
    endif ()
endif ()
```

--------------------------------

### Generate Windows version resource file

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Sets the version resource path and configures the file for Windows builds.

```cmake
#如果是Windows平台，则生成rc文件
set(FLUENTUI_VERSION_RC_PATH "")
if (WIN32)
    set(FLUENTUI_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
    configure_file(
            ${CMAKE_CURRENT_SOURCE_DIR}/.cmake/version_dll.rc.in
            ${FLUENTUI_VERSION_RC_PATH}
    )
endif ()
```

--------------------------------

### Clone the FluentUI repository

Source: https://github.com/zhuzichu520/fluentui/blob/main/README.md

Clones the FluentUI repository with its submodules using the --recursive flag.

```bash
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
```

--------------------------------

### Set compile definitions and platform-specific properties

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Adds HAVE_CONFIG_H definition, removes 'lib' prefix for MinGW, adds big-obj option, and sets debug postfix for MSVC.

```cmake
target_compile_definitions(${PROJECT_NAME}
        PRIVATE
        #导入qrcode配置文件
        HAVE_CONFIG_H
)

#去掉mingw生成的动态库libxxx前缀lib，不去掉前缀会导致 module "FluentUI" plugin "fluentuiplugin" not found
if (MINGW)
    set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "")
    #解决编译器报 too many sections的问题
    target_compile_options(${PROJECT_NAME} PRIVATE -Wa,-mbig-obj)
endif ()

#MSVC Debug 添加后缀d，与Qt插件风格保持一致
if (MSVC)
    set_target_properties(${PROJECT_NAME} PROPERTIES DEBUG_POSTFIX "d")
endif ()
```

--------------------------------

### Generate QML types for FluentUI in Qt 6 Release builds

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

If using Qt 6 (QT_VERSION_MAJOR ≤ 6) and a Release build type, finds the qmlplugindump tool and creates a custom target to generate plugins.qmltypes for FluentUI 1.0. The generated file is placed under Qt5/imports/FluentUI/plugins.qmltypes.

```cmake
if ((${QT_VERSION_MAJOR} LESS_EQUAL 6) AND (CMAKE_BUILD_TYPE MATCHES "Release"))
    find_program(QML_PLUGIN_DUMP NAMES qmlplugindump)
    add_custom_target(Script-Generate-QmlTypes
            COMMAND ${QML_PLUGIN_DUMP} -nonrelocatable -noinstantiate FluentUI 1.0 ${CMAKE_CURRENT_BINARY_DIR} > ${CMAKE_CURRENT_SOURCE_DIR}/Qt5/imports/FluentUI/plugins.qmltypes
            COMMENT "Generate qmltypes........."
            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/Qt5/imports/FluentUI/plugins.qmltypes
            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
    )
endif()
```

--------------------------------

### Set library type and plugin target name

Source: https://github.com/zhuzichu520/fluentui/blob/main/src/CMakeLists.txt

Determines whether to build a static or shared library and sets the plugin target name accordingly.

```cmake
if (FLUENTUI_BUILD_STATIC_LIB)
    set(LIB_TYPE "STATIC")
else ()
    set(LIB_TYPE "SHARED")
endif ()

if (FLUENTUI_BUILD_STATIC_LIB)
    set(PLUGIN_TARGET_NAME "")
else ()
    #如果是动态库，则使用插件目标作为其自己的支持目标来定义 QML 模块，在这种情况下，模块必须在运行时动态加载，并且不能由其他目标直接链接到
    set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
endif ()
```
Tokens:
Raw