QFluentKit: 一个基于 Qt Widgets 的 Fluent Design 风格 UI 组件库

1.简介

2.安装与集成

2.1.编译与安装

2.2.集成

3.简单示例

4.官方示例

5.总结与资源

1.简介

QFluentKit 是由 toddming 开发的基于 Qt Widgets 的 Fluent Design 风格 UI 组件库 ，专为 Qt C++ 开发者打造现代化、美观且易用的界面解决方案。该库已完全开源，集成了QWindowKit实现优雅的无边框窗口管理，支持 Qt 5.15+ 和 Qt 6 跨版本兼容，兼容 MinGW 与 MSVC 编译器。

QFluentKit 设计灵感源自 zhiyiYo 的 PyQt-Fluent-Widgets，致力于为 C++ 开发者提供原生的 Fluent Design 体验，无需编写复杂的 QSS 样式表即可快速构建符合 Windows 11 设计语言的应用界面。

它的优势有：

特性	详细说明
Fluent Design 语言	严格遵循微软 Fluent Design System，包含亚克力效果、毛玻璃、圆角、焦点环等现代 UI 元素
无缝无边框窗口	深度集成 QWindowKit，提供完整的拖拽、缩放、阴影、Windows 11 Snap Layout 支持
跨版本兼容	动态库支持 Qt 5.15+ 和 Qt 6，自动适配不同版本 API 差异，兼容主流编译器
流畅动画系统	所有控件均支持 60FPS 平滑过渡动画，包含 hover/focus/press 等状态动效，提升用户体验
统一主题管理	内置主题系统，支持亮暗主题无缝切换与自定义主题色，自动适配系统设置
开箱即用控件	提供丰富的 Fluent 风格控件，涵盖按钮、输入框、选择器、导航、对话框等多个类别
高度可定制	所有控件支持属性定制，动画参数可调，主题色可自由设置，满足个性化需求
轻量高效	注重性能优化，避免过度绘制，动画使用 QPropertyAnimation 实现，资源占用低

2.安装与集成

git地址：https://github.com/toddming/QFluentKit.git
通过网盘分享的文件：QFluentKit.zip

链接: https://pan.baidu.com/s/1tqtk6f_4KZFCi6Qqjl1C9g?pwd=1234 提取码: 1234

2.1.编译与安装

1.Windows (MinGW)

cpp 复制代码

mkdir build && cd build
cmake -G "MinGW Makefiles" -DQFLUENT_INSTALL_TO_QT=ON ..
mingw32-make
mingw32-make install

2.Windows (MSVC)

cpp 复制代码

mkdir build && cd build
cmake -G "Visual Studio 17 2022" -A x64 -DQFLUENT_INSTALL_TO_QT=ON ..
cmake --build . --config Release
cmake --install . --config Release

3.Linux/macOS

cpp 复制代码

mkdir build && cd build
cmake -DQFLUENT_INSTALL_TO_QT=ON ..
make -j$(nproc)
sudo make install

编译完后的目录如下：

cpp 复制代码

E:/Qt/6.8.3/msvc2022_64/
├── bin/
│   ├── QFluent.dll           # Release DLL
│   ├── QFluentd.dll          # Debug DLL (with 'd' suffix)
│   ├── QFluent.pdb           # Debug PDB (MSVC only)
│   ├── QFluent.dll.debug     # Debug symbols (MinGW only)
│   └── ...
├── lib/
│   ├── QFluent.lib           # Release import library
│   ├── QFluentd.lib          # Debug import library (with 'd' suffix)
│   └── cmake/
│       └── QFluent/          # CMake config files
│           ├── QFluentConfig.cmake
│           ├── QFluentConfigVersion.cmake
│           └── QFluentTargets.cmake
├── include/
│   └── QFluent/              # Header files
│       ├── FluentGlobal.h
│       ├── Theme.h
│       ├── FluentIcon.h
│       └── ...
└── share/
    └── QFluent/
        └── res/              # Resource files (icons, stylesheets)

2.2.集成

编译与安装完后，在你的系统中指定QFluentKit的目录：

cpp 复制代码

# Add to CMAKE_PREFIX_PATH
set(CMAKE_PREFIX_PATH "/path/to/install/lib/cmake/QFluent;${CMAKE_PREFIX_PATH}")
find_package(QFluent REQUIRED)
target_link_libraries(MyApp PRIVATE QFluent::QFluent)

或设置 QFluent_DIR：

cpp 复制代码

set(QFluent_DIR "/path/to/install/lib/cmake/QFluent")
find_package(QFluent REQUIRED)
target_link_libraries(MyApp PRIVATE QFluent::QFluent)

或源码集成：

cpp 复制代码

# Add QFluentKit subdirectory
add_subdirectory(QFluentKit)

# Link QFluent
target_link_libraries(MyApp PRIVATE QFluent)

3.简单示例

cpp 复制代码

#include <QWidget>
#include <QApplication>

#include "QFluent/LineEdit.h"
#include "QFluent/PushButton.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // Create a Fluent window
    QWidget window;
    window.setWindowTitle("QFluentKit Example");
    window.resize(800, 600);

    // Create a button
    auto *button = new PrimaryPushButton(&window);
    button->setText("Click Me");
    button->move(350, 280);

    // Create a line edit
    auto *lineEdit = new LineEdit(&window);
    lineEdit->setPlaceholderText("Please enter content...");
    lineEdit->move(350, 340);

    window.show();
    return app.exec();
}

4.官方示例

运行QFluentExample.exe, 如下图：

5.总结与资源

QFluentKit 为 C++ Qt 开发者提供了一套完整的 Fluent Design 解决方案，通过统一的主题管理、丰富的控件库和流畅的动画系统，大幅降低了现代 UI 开发的门槛。特别是其与 QWindowKit 的深度集成，解决了 Qt 无边框窗口的诸多痛点，让开发者能够专注于业务逻辑而非界面细节。

官方资源

GitHub 仓库：https://github.com/toddming/QFluentKit
示例项目：https://github.com/toddming/QFluentExample
QWindowKit 仓库：https://github.com/OrchidIsle/QWindowKit