前言
Flutter 用的是 Dart 语言，而 Dart 很多地方借鉴了 React ，比如说每次页面刷新用的是和 React 类似的setState写法，这样虽然便于页面数据的更新，但也带来了 React 中一直存在的 state无法跨页面更新的问题。
React 提供了 Redux ， Mobx 等框架来管理页面状态和 App 全局状态，而闲鱼也提供了基于 Redux 的 Fish Redux 用来管理数据的组装式 Flutter 应用框架。
本文主要讲的mobx.dart是 Mobx 官方推出的，基于 Dart 语言，用来处理 Dart 和 Flutter 状态的框架。 思路和 Mobx 在 JS 中的用法差不多。作者在开发 React-Native 时用的最多的就是 Mobx， 最近正好在使用 Flutter 重写开源项目 识兔，所以本文就应运而生。
需求
本文主旨 使用 ，而使用最好的办法就是实现一个功能。
本文实现一个很简单的关于跨页面传值的功能。
创建三个tab，在第一个tab，做一个模糊的背景图，在第三个tab，点击按钮，将第一个tab的背景图换掉。
准备工作
dependencies:
mobx: 0.3.8+1
flutter_mobx: 0.3.3+1
mobx_codegen: 0.3.9+1 // MobX代码生成库，用来生成 .g.dart的库
创建Store
为什么创建Store呢？ 因为我们要做的是跨页面修改状态，在 Redux 中称为 Store， 这里直接借鉴过来。
App可以有多个 Store， 但不推荐每个页面都是 Store，推荐只有那种需要跨页面修改状态的页面命名为 xxxStore，其他都可以成为 xxxMobx。
shitu_store.dart
import 'package:mobx/mobx.dart'; // 引入
part 'shitu_store.g.dart'; // 稍后会用命令行生成这个文件，但这里必须要这么写
class ShiTuStore = _ShiTuStore with _$ShiTuStore; // 固定写法
// 直接初始化一个store，不在页面中创建，只要在页面中引用就可以跨页面更新了
final ShiTuStore shituStore = ShiTuStore();
abstract class _ShiTuStore with Store {
// 默认图片地址
@observable
String imageUrl =
'http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg';
// 外部调用，用来修改默认图片的方法
@action
setImageUrl(String url) {
imageUrl = url;
}
}
执行命令行
flutter packages pub run build_runner build
上面写到了要添加part 'shitu_store.g.dart'; 这里通过这个命令行自动生成该文件。
通过上面这行命令，会让 Dart 添加对 @observable，@computed， @action的支持，让 Mobx 的使用变得简单。
这部分代码，因为是自动生成的，这里就不贴出来了。需要的可以看开源项目 flutter_shitu
业务代码
前期准备工作都完成了，接下来就是修改页面效果了。
shitu.dart
body: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Image.network(
shituTuStore.imageUrl, // 通过store得到要展示的图片
fit: BoxFit.fitHeight,
height: height,
),
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5,
),
child: Container(
color: Colors.white.withOpacity(0.1),
),
),
],
)
可以发现我这里用了 Stack 组件，但为什么用这个？ 有兴趣的小伙伴可以看我另一个系列的文章
从0到1使用Flutter重构识兔（1）
mine.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('我的')),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('点击更改'),
onPressed: () {
// 点击时，调用shituStore中的方法切换首页图片
shituStore.setImageUrl(
'https://ws1.sinaimg.cn/large/0065oQSqly1g0ajj4h6ndj30sg11xdmj.jpg');
},
)
],
),
),
),
);
}
总结
主要流程就是 Store => 生成Mobx配置 => 页面。
最近在用 Flutter 重写 识兔项目。
Flutter版识兔也已经开源，稍后会有更多新文章和新功能向大家展示，欢迎star，fork。
