flutter mobx状态管理

依赖

dependencies:
  mobx: ^0.1.4
  flutter_mobx: ^0.1.3

dev_dependencies:
  mobx_codegen: ^0.1.3
  build_runner: ^1.4.0

创建对象

以计数例子为例，创建一个counter.dart文件，代码如下：

import 'package:mobx/mobx.dart';
part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

final Counter counter = Counter();

abstract class CounterBase implements Store {
  @observable
  int count = 0;

  @action
  void add() {
    count++;
  }

  @action
  void minus() {
    count--;
  }

  @action
  void setCount(int value) {
    this.count = value;
  }
}

注意：必须包含以下两行代码，才可以生成counter.g.dart文件

part 'counter.g.dart';
class Counter = CounterBase with _$Counter;

在命令行中执行命令

flutter packages pub run build_runner build

完成后将会生成counter.g.dart文件 执行一下命令，可以实现counter.g.dart文件的动态生成

flutter packages pub run build_runner watch

即修改counter.dart文件后 ctrl + s（热重载）即可重新生成。

数值显示

在需要显示count值的时候，使用如下代码： Observer(builder: (_) => Text('${counter.count}')), Observer是一个观察者，继承了StatefulWidget，将要观察的组件放置在里面，就能实现对该组件的状态管理。

数值操作

在counter.dart中有add()、minus()和setCount()三个方法对count的值进行修改。可在按钮的点击事件中调用相关方法进行修改，如下：

RaisedButton(
  child: Text('加'),
  onPressed: counter.add,
),

以上就是flutter mobx的简单使用方法。
完整代码案例详见GitHub：github.com/huang-weilo…