管理StatefulWidget的状态最常见的方法：
-
Widget管理自己的状态。
-
父Widget管理子Widget状态。
-
混合管理（父Widget和子Widget都管理状态）。
-
全局管理。
那我们如何决策使用哪种管理方法，可以根据一些原则来做决定：
-
如果状态是用户数据，如复选框的选中状态、滑块的位置，那最好由父Widget管理。
-
如果状态是有关界面外观的，如颜色、动画，那最好由Widget本身来管理。
-
如果某一个状态是不同Widget共享的，那最好由它们共同的父Widget管理。
一. Widget管理自己的状态
在Widget内部管理状态封装性会好一些：
class TestDemo extends StatefulWidget {
TestDemo({Key key}) : super(key: key);
@override
_ TestDemoState createState() => new _TestDemoState();
}
class _TestDemoState extends State<TestDemo> {
bool _active = false;
void _handleTap() {
setState(() {
_active = !_active;
});
}
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
child: new Center(
child: new Text(
_active ? 'Active' : 'Inactive',
style: TextStyle(fontSize: 18.0, color: Colors.white),
),
),
width: 300.0,
height: 300.0,
decoration: new BoxDecoration(
color: _active ? Colors.lightGreen[700] : Colors.grey[600],
),
),
);
}
}
二. 父Widget接管子Widget的状态
父Widget管理状态并告诉其子Widget何时更新。如下面这个例子，TapboxB继承StatelessWidget类，其所有状态都由其父组件ParentWidgetState管理。
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new TapboxB(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
class TapboxB extends StatelessWidget {
TapboxB({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
void _handleTap() {
onChanged(!active);
}
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
child: new Center(
child: new Text(
active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: active ? Colors.lightGreen[700] : Colors.grey[600],
),
),
);
}
}
三. 混合状态管理
混合管理的方式就好理解了，以上两种方式都有，组件自身管理一些内部状态，而父组件管理一些其他外部状态。
四. 全局管理状态
有一些情况是需要状态能够在其他组件或者路由中进行同步的，比如设置页里可以设置语言状态，当状态一改变时，我们希望其他应用语言的组件能够同步，此时这种跨组件间的通信就要用到以下两种方案：
-
事件总线。
-
Provider、Redux等用于状态管理的包。
1. 事件总线。
我们可以通过订阅者模式来实现一个简单的全局事件总线，订阅者模式包含发布者和订阅者两种角色，对于一些简单的应用，事件总线是足以满足业务需求的。下面代码使用一个单例来保证EventBus是同一个实例，这个实例可以触发事件和监听事件：
//订阅者回调签名
typedef void EventCallback(arg);
class EventBus {
//私有构造函数
EventBus._internal();
//保存单例
static EventBus _singleton = new EventBus._internal();
//工厂构造函数
factory EventBus()=> _singleton;
//保存事件订阅者队列，key:事件名(id)，value: 对应事件的订阅者队列
var _emap = new Map<Object, List<EventCallback>>();
//添加订阅者
void on(eventName, EventCallback f) {
if (eventName == null || f == null) return;
_emap[eventName] ??= new List<EventCallback>();
_emap[eventName].add(f);
}
//移除订阅者
void off(eventName, [EventCallback f]) {
var list = _emap[eventName];
if (eventName == null || list == null) return;
if (f == null) {
_emap[eventName] = null;
} else {
list.remove(f);
}
}
//触发事件，事件触发后该事件所有订阅者会被调用
void emit(eventName, [arg]) {
var list = _emap[eventName];
if (list == null) return;
int len = list.length - 1;
//反向遍历，防止订阅者在回调中移除自身带来的下标错位
for (var i = len; i > -1; --i) {
list[i](arg);
}
}
}
//定义一个top-level（全局）变量，页面引入该文件后可以直接使用bus
var bus = new EventBus();
使用时：
//页面A中
...
//监听登录事件
bus.on("login", (arg) {
// do something
});
//登录页B中
...
//登录成功后触发登录事件，页面A中订阅者会被调用
bus.emit("login", userInfo);
但是这种方式有一些明显的缺点：
- 必须显式定义各种事件，不利于管理。
- 订阅者必须需显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄露。
其实，在Flutter当中有更好的跨组件状态管理方式，就是利用InheritedWidget来实现跨组件状态共享。
2. Provider。
Provider 是基于InheritedWidget来实现状态共享的。InheritedWidget是Flutter中非常重要的一个Widget，像国际化、主题等都是通过它来实现。
使用InheritedWidget来简单实现Provider，可以看下一篇文章。
网友评论