Flutter for OpenHarmony 实战：MobX 声明式状态管理的高性能适配

前言

在中大型 HarmonyOS NEXT 应用开发中，状态管理（State Management）是决定工程可维护性与运行效率的“定海神针”。

在 Flutter 生态中，状态管理方案琳琅满目：Provider 简单但样板代码繁琐，Bloc 严谨但流式异步操作曲线陡峭。如果你正在追求一种**“心智负担更低、响应更精准、开发更自然”**的方案，那么基于透明观察者模式的 MobX 绝对是你的首选。

MobX 的迷人之处在于其**“透明响应式”**：它能自动追踪你的数据流向，在数据变动的毫秒级瞬间，精准定位并仅驱动那些真正受影响的 UI 组件重绘。当这种极致的渲染效率遇上鸿蒙 120Hz 高刷屏与高效的并发机制，你的应用将展现出一种如丝绸般顺滑的“数据即 UI”开发体验。本文将带你深度领略 MobX 在鸿蒙实战中的架构美学。

---

一、 MobX 的“三驾马车”：响应式的核心逻辑

1.1 Observables (状态)

应用中的实时数据中心。任何类型的 Dart 对象都可以变为可观察的。

final count = Observable(0); 
final list = ObservableList<String>();

1.2 Actions (动作)

唯一被允许改变状态的方式。在鸿蒙端，推荐通过 Action 统一管理，确保变更可追溯。

final increment = Action(() => count.value++);

1.3 Computeds (计算值)

由状态派生出的数据（如：总价 = 单价 * 数量）。它具备缓存机制，只有底层依赖变化时才重新计算。

final isPositive = Computed(() => count.value > 0);

1.4 Reactions (反应)

状态改变后的自动副作用，最核心的体现就是 Observer Widget。

Observer(builder: (_) => Text('${count.value}'))

---

二、 集成指南

2.1 添加依赖

在 pubspec.yaml 中配置。针对鸿蒙环境，我们推荐使用 2.5.0 版本以适配当前的 SDK 环境：

dependencies:
  mobx: ^2.5.0          # 适配 Dart 3.4 的兼容版
  flutter_mobx: ^2.2.0

dev_dependencies:
  build_runner: ^2.4.11
  mobx_codegen: ^2.5.0

2.2 自动代码生成（可选）

如果你喜欢使用注解（@observable），可以运行以下命令生成 .g.dart 文件：

dart run build_runner build

---

三、 实战：构建鸿蒙“极简响应式任务清单”

在很多场景下，我们并不一定非要使用代码生成器。这里演示如何直接使用 MobX 的核心组件，并规避与 Flutter 内置 Action 类的命名冲突。

3.1 定义 Store：原子化状态管理

// 💡 注意：手动模式下建议使用普通函数配合 runInAction
class TodoStore {
  final _todos = ObservableList<String>();
  List<String> get todos => _todos;

  late Computed<int> todoCount;

  TodoStore() {
    todoCount = Computed(() => _todos.length);
  }

  void addTodo(String task) {
    if (task.isNotEmpty) {
      // 💡 runInAction 确保状态变更的原子性
      runInAction(() => _todos.add(task));
    }
  }
}

3.2 UI 连接：精准到 Widget 的重绘过滤

// 仅这个 Text 会在数值变化时重新渲染
Observer(
  builder: (_) => Text('待处理任务：${todoStore.todoCount.value}'),
),

---

四、 鸿蒙平台的性能与适配建议

4.1 高帧率屏幕的“精准打击”

鸿蒙设备标配 120Hz 高刷新率屏幕。MobX 的特性在于它能自动过滤无效渲染。
示例：在一个拥有 1000 条数据的列表中，如果你只修改了第 5 条，Observer 会确保只有那一个特定的 Item 进行重绘，这能极大维持鸿蒙应用的“丝滑感”。

4.2 异步操作的安全实践

在处理鸿蒙网络请求时，Action 必须包裹异步返回后的状态赋值：

Future<void> fetchData() async {
  final data = await api.get();
  runInAction(() => this.result = data); // 异步完成后回归 Action
}

---

五、 完整示例：开箱即用的响应式计数器

如果你想跳过复杂的环境配置，直接在 main.dart 中运行，可以使用以下完整代码：

import 'package:flutter/material.dart' hide Action;
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';

// 💡 极简 Store：演示原子级状态更新
class CounterStore {
  final _count = Observable(0);
  int get count => _count.value;

  // 使用 runInAction 确保变更被有效追踪
  void increment() => runInAction(() => _count.value++);
  void decrement() => runInAction(() => _count.value--);
}

class MobXCounterPage extends StatelessWidget {
  final store = CounterStore();

  MobXCounterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MobX 极简计数器'),
        elevation: 0,
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () =>
                runInAction(() => (store as dynamic)._count.value = 0),
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('当前响应式状态值：', style: TextStyle(color: Colors.grey)),
            const SizedBox(height: 20),
            // 💡 核心：仅包裹最小范围的刷新组件
            Observer(
              builder: (_) => Text(
                '${store.count}',
                style: const TextStyle(
                  fontSize: 120,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF007DFF),
                ),
              ),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildActionButton(
                    Icons.remove, store.decrement, Colors.redAccent),
                const SizedBox(width: 40),
                _buildActionButton(Icons.add, store.increment, Colors.green),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _buildActionButton(
      IconData icon, VoidCallback onPressed, Color color) {
    return Container(
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        shape: BoxShape.circle,
      ),
      child: IconButton(
        icon: Icon(icon, color: color, size: 32),
        onPressed: onPressed,
      ),
    );
  }
}

---

六、 总结

MobX 的美在于其“开箱即用”且“透明”。它让 Flutter 应用在鸿蒙平台上拥有了类似前端 Vue 的响应式魔法，极大地提升了研发效率，并天然具备高性能的渲染基因。

---

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区