简介
MobX只是一个状态管理库,可以很容易地将应用程序的被动数据与UI连接起来.
参照mobx官网创建一个demo示例
1. 创建Flutter应用
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
- 输入 Project 名称 (如
myapp
), 然后按回车键- 指定放置项目的位置,然后按蓝色的确定按钮
- 等待项目创建继续,并显示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文件
注:
如果之前有使用过类似的生成库,可能会报文件冲突错误,
可以尝试下面的clean命令,在命令窗也会有对应的提示:
flutter packages pub run build_runner watch --delete-conflicting-outputs
-
如果需要实时跟踪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一致,点击右下角的+号,屏幕中央显示的计数对应增加。