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

在 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 的绑定机制实现零手动刷新

来源链接：https://www.cnblogs.com/jtxs/p/18771536