Qt FluentUI 框架

项目地址：zhuzichu520/FluentUI (github.com)

安装

编译

直接用 Qt Creator 打开工程，编译运行 example 即可。

根据 CMakeLists.txt 可以看出，编译好了后会自动在 <Qt_SDK_DIR>/<Qt_Version>/<Your_compiler>/qml 下面生成 FluentUI 文件夹，其中存放着 FluentUI 的动态库。

集成到项目

因为库文件已经安装到 Qt 的 qml 目录，因此直接在QML里面 import FluentUI 即可，不需要额外的使用 find_package() 来寻找FluentUI。

自己的CMakeLists.txt只需要把源文件，QML文件和资源文件引入就可以了。最简单的就是用Qt Creator直接创建Qt Quick程序：

CMakeLists.txt

cmake_minimum_required(VERSION 3.16)

project(FluentTestWindow VERSION 0.1 LANGUAGES CXX)

set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 REQUIRED COMPONENTS Quick)


qt_add_executable(appFluentTestWindow
    main.cpp
)

qt_add_qml_module(appFluentTestWindow
    URI FluentTestWindow
    VERSION 1.0
    QML_FILES Main.qml
)

set_target_properties(appFluentTestWindow 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
)

target_link_libraries(appFluentTestWindow
    PRIVATE Qt6::Quick
)

install(TARGETS appFluentTestWindow
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Main.qml ，需要引入FluentUI：

import QtQuick
import QtQuick.Window
import FluentUI

FluWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    FluFilledButton {
        width: 125
        height: 35
        text: qsTr("Hello world!")
        anchors.centerIn: parent
    }
}

main.cpp ：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
	QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/FluentTestWindow/Main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

发布

自己的项目发布时，是把fluentuiplugin的相关库都一起打包即可。

组件说明

直接参考库中 example 例程，给出了所有组件的效果和 qml 代码。