Flutter 状态管理之MobX
MobX一直是主要用于JS的主要的状态管理技术。flutter 现在关于状态管理的方案有 Scoped Model,Inherited Widget,Redux for Flutter,甚至是BLoC 。
之前写React的时候就有用过mobx,很是喜欢 , 现在发现提供了dart版本,于是来学习一下. 也许会成为最好用的状态管理工具呢
介绍
MobX只是一个状态管理库,可以很容易地将应用程序的被动数据与UI连接起来.
使用
导包
首先,我们将导入mobx,flutter_mobx,作为我们的依赖项。
此外,我们必须导入mobx_codegen和build_runner作为dev依赖项。
dependencies:
flutter:
sdk: flutter
mobx: ^0.1.4
flutter_mobx: ^0.1.3
dev_dependencies:
flutter_test:
sdk: flutter
mobx_codegen: ^0.1.3
build_runner: ^1.4.0
创建可观察对象
然后我们先创建一个dart文件:
/*
* author: Created by 李卓原 on 2019/5/16.
* email: zhuoyuan93@gmail.com
*
*/
import 'package:mobx/mobx.dart';
part 'counter.g.dart';
class Counter = CounterBase with _$Counter;
abstract class CounterBase implements Store {
@observable
int value = 0;
@action
void increment() {
value++;
}
@action
void decrement() {
value--;
}
@action
void set(int value) {
this.value = value;
}
}
没有什么复杂的内容,就是创建一个类,其中有一个可观察的value属性.
之后运行 pub run build_runner build
如果无效请运行 flutter packages pub run build_runner build
要有以下两行代码,这个命令才会生成counter.g.dart文件
part 'counter.g.dart';
class Counter = CounterBase with _$Counter;
如果要在进行更改时使其在后台运行,请使用:
pub run build_runner watch
运行这个命令之后, 当你的可观察类有内容修改时,会自动根据最新代码生成对应的.g.dart文件
使用可观察对象来展示数据
可将要观察的组件用Observer包裹:
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
),
),
class _MyHomePageState extends State<MyHomePage> {
final Counter counter = Counter();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
),
),
SizedBox(height: 100),
RaisedButton(
child: Text('加'),
onPressed: counter.increment,
),
RaisedButton(
child: Text('减'),
onPressed: counter.decrement,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
counter.set(0);
},
tooltip: '归零',
child: Text('归零'),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
效果:
多个页面共享状态
假设我有几个页面都需要展示这个count , 怎么做到改变一处,其他的地方也跟着改变呢?
在Counter类中添加以下代码:
final Counter counter = Counter();
1
即创建了一个全局的counter,用的时候用这个counter就可以了.
第一个页面:
class _MyHomePageState extends State<MyHomePage> {
// final Counter counter = Counter();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
),
),
SizedBox(height: 100),
RaisedButton(
child: Text('加'),
onPressed: counter.increment,
),
RaisedButton(
child: Text('减'),
onPressed: counter.decrement,
),
RaisedButton(
child: Text('go to second page'),
onPressed: () => Navigator.pushNamed(context, '/second')),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
counter.set(0);
},
tooltip: '归零',
child: Text('归零'),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
第二个页面:
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('second page'),
),
body: Center(
child: Observer(
builder: (_) => Text(
'count is ${counter.value}',
style: TextStyle(fontSize: 30),
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: counter.increment,
),
);
}
}
github源码
其他相关资源:
MobX介绍 及 ReactNative 中的使用
observable.map 介绍
————————————————
版权声明:本文为CSDN博主「__卓原」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u011272795/article/details/90290942
相关文章
- Flutter SliverAnimatedOpacity 透明渐变动画效果
- Flutter DateTimeRange 日期时间范围选择器
- Flutter轮播图效果、Flutter轮播图Demo
- Flutter 底部向上动画弹出的菜单选项
- Flutter 一个优美的用户体验的登录页面 抖动提示 文本提示
- Flutter 底部弹框 showModalBottomSheet 使用Demo
- Flutter Provider 异步通信、Provider状态管理
- Flutter中async与await异步编程原理分析
- 浅谈Flutter的状态State
- Flutter 从配制开发环境再到开发第一个应用
- Flutter移动电商实战 --(24)Provide状态管理基础
- Flutter移动电商实战 --(17)首页_楼层区域的编写
- Flutter教程之使用不同的方法维护 Flutter 应用程序状态
- Flutter BoxDecoration 实现圆形、圆角、下划线、阴影、渐变色背景
- Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
- 10 个派上用场的 Flutter 小部件
- [flutter专题]详解AppBar小部件
- vscode如何及时提示flutter代码
- Flutter 学习之旅 之 flutter 简单介绍和基础环境搭建的简单整理
- 通过 flutter 实现一个列表功能
- 一份完整的Android Studio搭建Flutter教程