FluentUI-main的详解

一、FluentUI-main文件里面各文件夹的作用

1.入口 & 全局配置

• CMakeLists.txt      主构建脚本，决定编译哪些模块、示例、选项。

• FluentUIConfig.cmake.in 供下游 find_package(FluentUI) 使用，输出安装路径变量。

• .gitignore / .gitattributes Git 忽略/属性规则。

• LICENSE / README.md   开源协议与项目简介。

2.配置开关（build flags）

• FluentUIBuildConfig.cmake 集中定义 FLUENTUI_BUILD_EXAMPLES、FLUENTUI_ENABLE_FRAMELESSHELPER 等开关。

• cmake/          模块化的 CMake 函数宏，被主 CMakeLists.txt 调用。

3.源码目录

• src/           所有 QML/C++ 源码。
  ├─ imports/      最终安装后映射为 FluentUI/ 的 QML 命名空间。
  ├─ controls/     FluentButton、FluComboBox 等控件的 QML 实现。
  ├─ core/       C++ 插件入口（fluentui_plugin.cpp）与单例工具类。
  └─ framelesshelper/  无边框窗口实现（可选模块）。

4.示例与文档

• examples/        独立可运行的 demo（如 examples/FluentUIDemo）。

• docs/          Markdown/截图形式的快速上手文档。

• screenshots/      控件的静态效果图，README 中引用。

5.脚本与工具

• scripts/        Python/Shell 小工具：一键打包 QML 资源、更新版本号等。

• .github/workflows/   GitHub Actions：CI 自动编译并在 Release 上传预编译包。

6.使用场景速查

• “我只想看控件长什么样” → 直接运行 examples/FluentUIDemo 的可执行文件。

• “我想改 ComboBox 源码” → 在 src/imports/controls/FluComboBox.qml 下手。

• “我要把库装到 Qt 目录” → 开 CMake GUI，勾 FLUENTUI_BUILD_EXAMPLES=OFF，然后 cmake --build . --target install

二、运行程序的详解

把 FluentUIDemo 跑起来后，主窗口左栏是一个 导航树（FluNavigationView），右栏是 控件展示区。如下图所示;打开 Demo → 左侧树形菜单 每一行就是一个控件页 → 右侧立即能看到对应的交互效果

1. Basic Input
   

2. Form
   

3. Surface
   

4. Layout
   

5. Popus
   

6. Navigation
   

7. Theming

8. Chat

 9.Other

 

三、FluentUI pro、FluentUI git、FluentUI脚手架的作用与使用教程

1.FluentUI pro  仅当你用 qmake 时才需要。

1. 作用
   • 传统 qmake 工程文件，描述：源文件清单、模块依赖、安装路径、宏开关。
   • 根目录的 FluentUI.pro 负责编译「FluentUI 动态库」。
   • examples/FluentUIDemo/FluentUIDemo.pro 负责编译「官方示例可执行文件」。

2. 使用步骤（qmake 老工程专用）

   git clone https://github.com/zhuzichu520/FluentUI.git
   cd FluentUI
   qmake FluentUI.pro          # 生成 Makefile
   make -j8                    # 编译
   make install                # 安装到 $$[QT_INSTALL_QML]/FluentUI

   之后在自己的 .pro 里加两行即可：

   QT += qml quick quickcontrols2
   QML_IMPORT_PATH += $$[QT_INSTALL_QML]/FluentUI

⚠️ 新仓库已默认 CMake；.pro 仅作兼容，可忽略。

2.FluentUI Git   源码 & 版本管理

1. 作用
   • 存放全部源码、示例、脚手架、CI 脚本。
   • Release 页提供 预编译二进制 与 脚手架模板 。
   • 分支规则：main 最新迭代；1.x 长期维护版。

2. 最常用 3 条命令

   # 1. 克隆
   git clone https://github.com/zhuzichu520/FluentUI.git
   # 2. 更新
   git pull origin main
   # 3. 切换到稳定版
   git checkout 1.7.0

   之后可直接用 QtCreator 打开 CMakeLists.txt 编译运行示例。

3.FluentUI脚手架

1. 作用
   • 一条命令生成「最小可运行」的新工程骨架：
   – CMakeLists.txt 或 .pro 二选一
   – main.cpp + Main.qml 已集成 FluApp
   – 自动拷贝 FluentUI 资源、设置环境变量
   • 支持 热重载（Pro 版专属）。

2. 使用步骤

   # 1. 进入仓库目录
   cd FluentUI
   # 2. 运行脚手架（Python 3）
   python scripts/initializr.py
   # 3. 交互式问答
   Project name: MyApp
   Build system: 1) CMake  2) qmake   → 输入 1
   Qt version  : 1) Qt6    2) Qt5     → 输入 1
   Generate example code ? y/n → y
   # 4. 打开 QtCreator → 打开 MyApp/CMakeLists.txt → 编译运行

   完成后立即看到一个带 FluentUI 样式的空窗口，可在此基础上开发。

4.总结

• 想“改源码”→ 直接用 Git 仓库；

• 想“跑示例”→ 打开 examples/FluentUIDemo；

• 想“建新工程”→ 用脚手架一条命令即可。

四、luentUI-main的src与example的详解

1、src/ 控件的“生产线”

src/
├─ core/ ← C++ 插件
│ ├─ fluentui_plugin.cpp → 注册 QML 单例、字体、图标资源
│ └─ fluentui_global.h → 宏/版本号
├─ imports/ ← QML 命名空间（安装后 = import FluentUI 1.x）
│ └─ FluentUI/
│ ├─ qmldir → 声明所有可导出类型
│ ├─ FluButton.qml → 按钮（Basic Input）
│ ├─ FluComboBox.qml → 下拉框（DropDown & Pickers）
│ ├─ FluNavigationView.qml→ 抽屉导航（Navigation & Layout）
│ ├─ FluTableView.qml → 表格（Data Display）
│ ├─ FluContentDialog.qml → 弹出框（Feedback & Overlay）
│ ├─ FluTheme.qml → 全局主题（浅色/深色、圆角、亚克力）
│ └─ …（其余 60+ 控件）
├─ fonts/ ← 字体文件（Segoe-UI / 图标字体）
└─ framelesshelper/ ← 无边框窗口 C++ 实现（可选模块）

快速定位技巧
• 想找某个控件的源码：直接 Ctrl+P → 输入控件名 .qml。
• 想改主题色：改 FluTheme.qml 里的 property color primaryColor。
• 想加新图标：把 svg 扔 imports/FluentUI/icons/ 并在 qmldir 追加。

2、examples/ 控件的“样板间”

examples/ ← 每个子目录即一个独立可运行程序
├─ FluentUIDemo/ ← 官方主要演示程序
│ ├─ CMakeLists.txt → 主构建脚本（也兼容 QtCreator 打开）
│ ├─ main.cpp → 入口：创建 QGuiApplication + FluApp
│ ├─ Main.qml → FluNavigationView 外壳
│ ├─ pages/ → 左侧树形导航对应的页面
│ │ ├─ ButtonPage.qml → 演示所有按钮形态
│ │ ├─ ComboBoxPage.qml → 演示单选/多选/可编辑/过滤/自定义模型
│ │ ├─ NavigationViewPage.qml→ 演示收缩/展开/顶部/左侧模式
│ │ ├─ TableViewPage.qml → 排序、复选、整行选择、右键菜单
│ │ └─ …（其余 40+ 页面）
│ └─ assets/ → Demo 专属图片、假数据 json
└─ SimpleDemo/ ← 最小骨架（main.cpp + Main.qml 共 30 行）

使用技巧

1. 用 QtCreator 打开 examples/FluentUIDemo/CMakeLists.txt → Ctrl+R 直接跑。

2. 左侧导航树节点名 === 源码文件名，点哪个节点就跳到对应 *Page.qml。

3. 想“抄样式”：打开任意 *Page.qml，把里面的控件直接复制到自己的项目即可。

4. 想“调主题”：在 Demo 里点右上角「月亮/太阳」图标 → 看 FluTheme.qml 如何切换。

总结
• src/ ＝「造轮子」：C++ 插件 + 60+ QML 控件源码 + 主题 + 字体。
• examples/ ＝「用轮子」：最小 30 行骨架 + 官方 40+ 页面样板。
改控件 → 去 src/；抄用法 → 去 examples/。

五、src目录包含的核心组件

1. 插件与全局（core/）
   • fluentui_plugin.cpp   → 把 C++ 类型、字体、图标注册进 QML 引擎
   • fluentui_global.h    → 版本号、单例宏、跨平台开关

2. 主题与资源（imports/FluentUI/）
   • FluTheme.qml      → 全局浅色/深色、圆角、亚克力、动画速度
   • fonts/        → Segoe UI & Fluent 图标字体
   • qmldir        → 声明所有导出类型

3. 基本输入（Basic Input）
   • FluButton.qml      → 普通/主要/危险/文本按钮
   • FluToggleButton.qml  → 带开关状态的按钮
   • FluCheckBox.qml / FluRadioButton.qml / FluSwitch.qml

4. 下拉与选择（DropDown & Pickers）
   • FluComboBox.qml    → 单选下拉
   • FluEditableComboBox.qml → 可输入+过滤+自动补全
   • FluDatePicker.qml / FluTimePicker.qml / FluCalendar.qml

5. 数据展示（Data Display）
   • FluTableView.qml    → 可排序、复选、右键菜单、整行选择
   • FluTreeView.qml    → 树形数据
   • FluListView.qml    → 单列/多列列表

6. 导航与布局（Navigation & Layout）
   • FluNavigationView.qml → 左侧抽屉导航（折叠/展开/顶部模式）
   • FluTabView.qml     → 标签页
   • FluBreadcrumbBar.qml → 面包屑
   • FluContentDialog.qml → 弹出确认/提示框
   • FluFramelessWindow.qml → 无边框、可拖动、亚克力背景

src 里真正被 import FluentUI 1.x 导出的 核心 QML 控件 就是FluTheme + 60+ 个 FluXxx.qml；
其余是 C++ 插件、字体、无边框辅助类。