QT QML 使用 QuickFlux 和 Qt FluentUI 整合集成

嘀荼酴 发表于 2025-6-1 20:52:53

在 Qt QML 中结合 QuickFlux（状态管理框架）与 Qt FluentUI（现代 UI 组件库）可以实现高效的状态管理和美观的界面设计。以下是实现两者协作的完整方案和代码示例：
1. 环境配置

1.1 安装依赖

[*]QuickFlux：通过 qpm（Qt Package Manager）安装：qpm install net.quickflux
[*]Qt FluentUI：克隆官方仓库并添加到项目路径：git clone https://github.com/zhuzichu520/FluentUI.git在 .pro 文件中导入：include(FluentUI/FluentUI.pri)
2. 结合场景：快速实现状态管理与 UI 更新

示例目标：通过 FluentUI 按钮修改全局主题色，用 QuickFlux 同步状态。

3. 目录结构

MyApp/
├── main.qml
├── stores/
│ └── ThemeStore.qml # 状态存储
├── actions/
│ └── ThemeActions.qml# 动作定义
└── components/
├── ThemeButton.qml # 自定义 FluentUI 组件
└── ...          4. 实现步骤

4.1 定义 Action 类型

创建 actions/ThemeActions.qml 定义主题修改动作：
// actions/ThemeActions.qml
pragma Singleton
import QtQuick 2.15
import QuickFlux 1.0

ActionTypes {
// 定义修改主题颜色的动作类型
property string changeThemeColor: "CHANGE_THEME_COLOR"
}4.2 实现 Store 管理状态

创建 stores/ThemeStore.qml 存储主题状态：
// stores/ThemeStore.qml
import QtQuick 2.15
import QuickFlux 1.0

Store {
id: themeStore

property color primaryColor: "#0067C0" // 默认 FluentUI 主题色

// 注册 Action 处理器
Filter {
   type: ThemeActions.changeThemeColor
   onDispatched: {
         // 接收新颜色并更新状态
         themeStore.primaryColor = message.color
   }
}
}4.3 封装 FluentUI 组件

创建自定义按钮组件 components/ThemeButton.qml：
// components/ThemeButton.qml
import QtQuick 2.15
import FluentUI 1.0

FluButton {
property color targetColor: "#0067C0"
text: "切换主题色"

// 点击时派发 Action 修改全局状态
onClicked: {
   AppDispatcher.dispatch({
         type: ThemeActions.changeThemeColor,
         color: targetColor
   })
}
}4.4 主界面集成

在 main.qml 中使用 FluentUI 布局并绑定状态：
// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import QuickFlux 1.0

ApplicationWindow {
width: 400
height: 300
visible: true

// 绑定 Store 中的主题色到 FluentUI 全局配置
FluTheme {
   primaryColor: ThemeStore.primaryColor
}

Column {
   anchors.centerIn: parent
   spacing: 15

   // FluentUI 文本控件显示当前颜色
   FluText {
         text: "当前主题色: " + ThemeStore.primaryColor
         font.pixelSize: 16
   }

   // 自定义主题切换按钮
   ThemeButton {
         targetColor: "#F25022" // Microsoft Fluent 红色系
         anchors.horizontalCenter: parent.horizontalCenter
   }
}

// 初始化 QuickFlux AppDispatcher
AppDispatcher {
   dispatcherId: "main"
   bindSource: true
}
}5. 核心协作流程

sequenceDiagram participant UI as FluentUI 组件 participant Dispatcher as QuickFlux Dispatcher participant Store as ThemeStore participant Theme as FluTheme UI->>Dispatcher: 用户点击按钮 -> 触发 onClicked Dispatcher->>Store: 派发 Action (type=CHANGE_THEME_COLOR) Store-->>UI: 更新 primaryColor 属性 Theme-->>UI: 所有绑定 FluTheme.primaryColor 的组件自动刷新6. 关键优化技巧

6.1 响应式主题切换

动态绑定 FluentUI 组件属性到 Store：
// 将按钮颜色与主题状态绑定
FluButton {
color: ThemeStore.primaryColor
hoverColor: Qt.lighter(ThemeStore.primaryColor, 1.2)
}6.2 异步操作处理

对于网络请求等异步场景：
// 在 ActionCreator 中处理异步逻辑
ActionCreator {
function fetchRemoteTheme() {
   Http.get("/api/theme").then(res => {
         AppDispatcher.dispatch({
            type: ThemeActions.changeThemeColor,
            color: res.data.color
         })
   })
}
}6.3 多 Store 管理

当应用扩展时，分模块管理状态：
AppListener {
// 监听全局主题变化
Filter {
   type: ThemeActions.changeThemeColor
   onDispatched: {
         UserSettings.save("theme", message.color)
   }
}
}7. 调试与验证

[*]调试 QuickFlux：通过 AppDispatcher.logging = true 输出 Action 数据流：AppDispatcher { logging: true }
[*]FluentUI 样式检查：使用 Qt Creator 的 Live Preview 实时查看组件样式更新。
8. 运行效果

[*]点击按钮后，所有绑定了 FluTheme.primaryColor 的组件（导航栏、按钮、文本等）会自动更新为新的主题色。
[*]通过 QuickFlux 的单向数据流，确保状态变化的可追溯性。
这种结合方式可以实现：

✅ 逻辑与UI分离 - 用 QuickFlux 管理复杂状态

✅ 高度可维护性 - FluentUI 提供一致的设计语言

✅ 动态响应能力 - QML 的绑定机制实现零手动刷新

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

页: [1]

程序园's Archiver

QT QML 使用 QuickFlux 和 Qt FluentUI 整合集成