FluentUI的介绍与使用案列

1.下载地址

GitHub - zhuzichu520/FluentUI: FluentUI for QML

2.生成动态库

使用cmake构建动态库***d.dll与***.dll,编译环境需要如下的依赖：

需要记住编译的环境。生成的动态库在对应的qml路径下面，如：D:\Qt\***\msvc2019_64\qml\FluentUI

运行成功后会出现如下界面：

3.简单使用FluentUI库的demo

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import FluentUI 1.0 //导入FluentUI库Window {width: 640height: 480visible: truetitle: qsTr("Test FluentUi")Button{id:id_btnQMlanchors.left: parent.leftanchors.leftMargin: 100anchors.top: parentanchors.topMargin: 50text: "这是一个QML Btn"onClicked: {id_btnQml.text = "点击btnQml"}}FluButton{id:id_btnFluanchors.left: parent.leftanchors.leftMargin: 100anchors.top: id_btnQMl.bottomanchors.topMargin: 50text: "这是一个FluentUI Btn"onClicked: {id_btnFlu.text = "点击btnFlu"}}
}

4.简单使用更多的FluentUI控间

import QtQuick 2.15
import QtQuick.Window 2.15
import FluentUI 1.0FluWindow {id: mainWindowvisible: trueminimumWidth: Screen.width * 0.8minimumHeight: Screen.desktopAvailableHeight * 0.8title: "Tutorial1-FirstWindow"// 用 appBar 属性注入自定义标题栏，而不是再手动写一个appBar: FluAppBar {title: mainWindow.titleshowDark: truedarkText: "Dark Mode"}closeListener: function (event) {dialog_close.open()event.accepted = false}// 退出确认对话框FluContentDialog {id: dialog_closetitle: "退出"message: "确定要退出程序吗？"negativeText: "最小化"buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButtononNegativeClicked: mainWindow.hide()positiveText: "退出"neutralText: "取消"onPositiveClicked: Qt.quit()}
}

5.FluentUI能支持的控件

6.FluentUI与原生QtQuick控件的相同点

维度	说明
技术栈	二者都基于 Qt QML 引擎，语法完全一样（property、signal、onClicked…）。
布局方式	都支持锚布局、Row/Column、Grid、Flow、Layout 等。
事件机制	MouseArea、Keys、Touch、Wheel 等事件处理方式一致。
样式覆盖	都支持 style 或自定义 background/contentItem 来二次设计。
跨平台	Windows / Linux / macOS 均可运行，FluentUI 只是把 Qt 的渲染结果再“包一层”。

7.FluentUI与原生QtQuick控件的不同点

维度	FluentUI 控件	Qt Quick 原生控件
设计体系	完整实现 Microsoft Fluent Design：Mica、Acrylic、光影、圆角、动效，主题跟随系统深浅色。	仅提供 Material 和 Universal 两个可选样式，且需要手动切换。
组件粒度	更细：同样一个按钮就拆成 FluButton / FluFilledButton / FluIconButton / FluTextButton 等不同语义。	一个 Button 通过 style 去变体。
默认动效	所有组件自带 PointerOver / Pressed / Reveal / Ripple 等动效，且无法关闭（除非改源码）。	基本无动效，需要开发者自己写 Behavior 或 NumberAnimation。
功能增强	内置 无边框窗口 (FluWindow)、标题栏 (FluAppBar)、主题切换 (FluTheme) 等一整套解决方案。	原生 Window 只有系统标题栏，无边框需自己写 FramelessHelper。
图标系统	自带 Segoe Fluent Icons 字体，直接 icon: FluentIcons.Add 即可使用；支持 多状态图标（大小/颜色/旋转）。	需自己准备 SVG/PNG 或 FontAwesome，无统一管理。
暗色/主题	一行 FluTheme.darkMode = Dark 全局生效，所有组件自动切换；支持自定义强调色。	必须逐个给 palette 赋值，或写多套 Component 切换。
高级控件	提供 FluContentDialog、FluInfoBar、FluProgressRing、FluTreeView、FluToggleSwitch 等“成体系”的高级控件。	Qt Quick Controls 2 也有，但样式与 Fluent 差距大，需大量重写。
性能	额外多了一层 C++ 插件封装，启动时多一次 dll/so 装载；运行期差异可忽略。	纯 QML/JS，无额外二进制依赖。
依赖	必须先用 CMake 编译/安装插件（dll+qmldir），否则 import FluentUI 1.0 报错。	随 Qt 安装即自带，零依赖。
可定制深度	想改“圆角 4→2 px”、阴影透明度等需改源码或 fork；样式变量集中但耦合度高。	100 % QML 源码可见，想怎么改都行。
文档与示例	目前以 GitHub README、示例 Demo 为主，API 文档仍在补全。	Qt 官方文档、示例齐全。