Flutter 中如何使用 mobx 和 flutter_mobx？

推荐答案

在 Flutter 中使用 mobx 和 flutter_mobx 的步骤如下：

1. 添加依赖：首先在 pubspec.yaml 文件中添加 mobx 和 flutter_mobx 依赖。

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

2. 创建 Store：创建一个 MobX Store 类，并使用 @observable、@action 和 @computed 注解来定义状态和行为。

   // www.javascriptcn.com code example
   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++;
     }
   
     @computed
     bool get isEven => count % 2 == 0;
   }

3. 生成代码：运行 build_runner 生成代码。

   flutter pub run build_runner build

4. 使用 Store：在 Flutter 应用中使用 Observer 组件来观察状态变化。

   // www.javascriptcn.com code example
   import 'package:flutter/material.dart';
   import 'package:flutter_mobx/flutter_mobx.dart';
   import 'counter_store.dart';
   
   void main() {
     final counterStore = CounterStore();
     runApp(MyApp(counterStore: counterStore));
   }
   
   class MyApp extends StatelessWidget {
     final CounterStore counterStore;
   
     MyApp({required this.counterStore});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('MobX Counter')),
           body: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 Observer(
                   builder: (_) => Text(
                     'Count: ${counterStore.count}',
                     style: TextStyle(fontSize: 24),
                   ),
                 ),
                 Observer(
                   builder: (_) => Text(
                     'Is Even: ${counterStore.isEven}',
                     style: TextStyle(fontSize: 24),
                   ),
                 ),
               ],
             ),
           ),
           floatingActionButton: FloatingActionButton(
             onPressed: counterStore.increment,
             child: Icon(Icons.add),
           ),
         ),
       );
     }
   }

本题详细解读

1. 添加依赖

在 pubspec.yaml 文件中添加 mobx 和 flutter_mobx 依赖是使用 MobX 的第一步。mobx 是核心库，提供了状态管理的功能，而 flutter_mobx 提供了与 Flutter 框架集成的工具。build_runner 用于生成代码。

2. 创建 Store

Store 是 MobX 中的核心概念，用于管理应用的状态。通过 @observable 注解，我们可以定义可观察的状态变量。@action 注解用于定义修改状态的方法，而 @computed 注解用于定义派生状态。

3. 生成代码

MobX 使用代码生成来简化开发流程。运行 build_runner 命令后，MobX 会自动生成 _$CounterStore 类，该类包含了所有必要的代码来管理状态的变化。

4. 使用 Store

在 Flutter 应用中，我们使用 Observer 组件来观察状态的变化。Observer 会根据状态的变化自动重建其子组件，从而实现 UI 的自动更新。通过这种方式，我们可以轻松地将 MobX 与 Flutter 集成，实现响应式的 UI 更新。