flutter-mobx之计数器示例

简介

MobX只是一个状态管理库，可以很容易地将应用程序的被动数据与UI连接起来.

参照mobx官网创建一个demo示例

1. 创建Flutter应用

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如myapp), 然后按回车键
5. 指定放置项目的位置，然后按蓝色的确定按钮
6. 等待项目创建继续，并显示main.dart文件

2. 引包

1.在dependencies下引入mobx、flutter-mobx两个包

2.在dev_dependencies下引入mobx_codegen、build_runner

注：请核对包的版本，高版本和低版本创建class时略有不同，请参照官网mobx中demo的yaml文件

dependencies:
  flutter:
    sdk: flutter
  mobx: ^0.3.7
  flutter_mobx: ^0.3.2
 
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  mobx_codegen: ^0.3.10
  build_runner: ^1.3.1

3.创建store对象

这里使用flutter工程的初始计数器示例进行修改，在lib下任意位置新建counter.dart文件，请注意，使用 with Store，而不是implements Store

在需要被观察的数据增加@observable注解，需要执行操作的方法增加@action注解,

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

abstract class _Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

对于dart版本的mobx，是通过生成新的类来实现双向绑定的效果，所以需要在store里面加上生成类的一些定义

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

接着执行flutter packages pub run build_runner build，就会在新建的文件旁生成对应的counter.g.dart文件

注：

1. 如果之前有使用过类似的生成库，可能会报文件冲突错误，可以尝试下面的clean命令，在命令窗也会有对应的提示:

    flutter packages pub run build_runner watch --delete-conflicting-outputs

1. 如果需要实时跟踪store的变化从而实时改变新生成的类，需要执行一个命令:

   flutter packages pub run build_runner watch ,

4.在widget中使用

在需要观察数据变化的widget套上一层Observer widget，

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx_examples/counter/counter.dart';

class CounterExample extends StatefulWidget {
  const CounterExample();

  @override
  CounterExampleState createState() => CounterExampleState();
}

class CounterExampleState extends State<CounterExample> {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text('MobX Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Observer(
                  builder: (_) => Text(
                        '${counter.value}',
                        style: const TextStyle(fontSize: 40),
                      )),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.increment,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      );
}

这样一个简单的mobx计数器demo就完成了，功能与原本demo一致，点击右下角的+号，屏幕中央显示的计数对应增加。