Flutter& 鸿蒙 next 中使用 MobX 进行状态管理

引言在 Flutter 中，状态管理是开发过程中至关重要的一部分。Flutter 提供了多种方式来管理应用的状态，如 Provider、Riverpod、BLoC 等。除了这些，MobX 也是一个流行的状态管理库。MobX 是一个响应式编程库，基于观察者模式，用于处理状态变化并自动更新 UI。在这篇博客中，我们将深入探讨如何在 Flutter 中使用 MobX 来进行状态管理，包括 MobX 的基本概念、如何集成到 Flutter 项目中以及如何使用 MobX 进行状态管理的代码示例。

什么是 MobX？MobX 是一种通过响应式编程管理应用状态的库。它依赖于观察者模式，当一个对象（例如模型、变量）发生变化时，所有依赖于该对象的部分会自动更新，从而简化了 UI 的管理。

MobX 主要有以下几个核心概念：

Observable: 可观察的数据对象，状态存储。Action: 对状态的修改行为，保证状态更新的可追溯性。Reaction: 响应式的自动更新机制，当依赖的 observable 发生变化时，自动触发 UI 更新。

如何在 Flutter 中使用 MobX

首先，确保你的项目中已经集成了 MobX 相关的依赖。

1. 添加依赖

打开 pubspec.yaml 文件，添加以下依赖：

dependencies:  flutter:    sdk: flutter  mobx: ^2.0.0  flutter_mobx: ^2.0.0 dev_dependencies:  build_runner: ^2.0.0  mobx_codegen: ^2.0.0

1. 创建 MobX Store

在 MobX 中，状态管理通常是通过 Store 来实现的。我们需要创建一个包含 Observable 状态和 Action 方法的类。

import 'package:mobx/mobx.dart'; part 'counter_store.g.dart'; // 自动生成代码的位置 class CounterStore = _CounterStore with _$CounterStore; abstract class _CounterStore with Store {  @observable  int count = 0; // 被观察的状态变量   @action  void increment() {    count++;  }   @action  void decrement() {    count--;  }}

在上面的代码中：

@observable 用来标记需要被观察的状态（即 count 变量）。当 count 的值发生变化时，UI 会自动更新。@action 用来标记修改状态的方法（即 increment 和 decrement 方法）。这是 MobX 规定的规则，用于确保所有的状态更新都通过动作函数进行，这样能避免直接修改状态。

1. 生成 MobX 代码

在终端中运行以下命令，生成 MobX 的辅助代码：

flutter pub run build_runner build

1. 使用 MobX Store

在 Flutter 中，使用 MobX store 可以通过 Observer 小部件来实现。当 Observable 数据发生变化时，Observer 会自动重建 UI 以反映最新的状态。

import 'package:flutter/material.dart';import 'package:flutter_mobx/flutter_mobx.dart';import 'counter_store.dart'; void main() {  runApp(MyApp());} class MyApp extends StatelessWidget {  final CounterStore counterStore = CounterStore();   @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(title: Text("MobX Example")),        body: Center(          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: [              Observer(                builder: (_) {                  return Text(                    'Count: ${counterStore.count}',                    style: TextStyle(fontSize: 30),                  );                },              ),              SizedBox(height: 20),              ElevatedButton(                onPressed: counterStore.increment,                child: Text("Increment"),              ),              ElevatedButton(                onPressed: counterStore.decrement,                child: Text("Decrement"),              ),            ],          ),        ),      ),    );  }}

在这个示例中，我们创建了一个 CounterStore 实例，并通过 Observer 小部件来观察 count 的变化。当 count 发生变化时，Observer 会自动重新构建相关的 UI 元素，显示新的 count 值。

代码详细解释

1. MobX Store 的实现在 CounterStore 类中，我们定义了一个 count 变量，并标记为 @observable，这表示该变量是可以被 MobX 观察的。当 count 变化时，所有依赖该值的 UI 部件会自动更新。接着，我们定义了两个 @action 方法：increment 和 decrement，它们分别用于增加和减少 count 的值。MobX 强制要求我们通过 @action 方法来修改 observable 的值，这样可以确保所有的状态更新都是有条理的，并且便于调试和测试。

2. 生成代码运行 flutter pub run build_runner build 命令后，Flutter 会生成一个自动的代码文件（例如：counter_store.g.dart）。这个文件包含了 MobX 的内部实现逻辑，比如 observable 状态的 getter 和 setter，以及 @action 的相关实现。这部分代码是自动生成的，我们不需要手动编写，MobX 会在后台处理这些繁琐的任务。

3. UI 与 MobX Store 的绑定在 Flutter 中，MobX 使用 Observer 小部件来观察状态的变化。通过在 Observer 小部件的 builder 回调中，我们可以访问 CounterStore 的 count 值。每当 count 改变时，Observer 会自动更新 UI。

ElevatedButton 小部件的 onPressed 回调中，我们调用了 counterStore.increment 和 counterStore.decrement 方法来更新状态。这些更新操作会触发 UI 的自动更新。

4. 反应式编程 MobX 使得反应式编程变得更加容易。当你修改 observable 变量时，依赖该变量的所有部分（如 UI）都会自动更新。你无需手动处理状态变化或 UI 刷新，MobX 会为你处理好这一切。这种自动的依赖追踪和更新机制是 MobX 的强大之处。