0.在Windows上搭建Flutter开发环境
1.从零开始学Flutter--Widget
[2.从零开始学Flutter--State 状态管理]
State状态 定义
Flutter是基于声明式框架，我们以前开发Android或者IOS都是基于命令式框架，如果是以前有过React/Vue的开发经验，了解Flutter状态管理会更加简单，如果是从原生的Android和IOS转到Flutter，理解起来可能会有难度，不过不急，我写这篇文章的时候也半懂不懂的，所以如果理解有出入可以留言交流，后面我有新的理解也会及时更新。
直接说人话，在Flutter中我们怎么去理解State，我们在原生移动开发的时候，如果需要改变一个控件的状态，直接调用那个控件暴露的函数就可以直接改变控件的状态，就算是自定义控件的时候，SDK也提供了很多基础的API让我们操作这个View的各种状态，但是在Flutter中，好像并没有一个控件或者View或者UI元素直接让我们去操作，前面我们说过，Widget只是一个UI元素的描述，而且并不是所有的Widget都能改变状态，所以他的子类分为StatelessWidget 和 StatefulWidget，其中 StatelessWidget 的状态是不可改变的，StatefulWidget状态可以变化，需要通过实现createState函数，接受一个State去改变状态。
我们先不探究原理，先大致了解在Fluter怎么去管理State
Widget管理自己的状态。
在上一章介绍Widget里面，我们有写一个简单的例子
class PageOne extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new TextSatte();
}
}
class TextState extends State {
var _count = 0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text("举个例子"),
),
body: new Stack(
children: <Widget>[
new Align(
child: Text("我继承StatefulWidget$_count"),
),
new Align(
alignment: new FractionalOffset(0.5, 1),
child: new MaterialButton(
onPressed: () {
setState(() {
_count++;
});
},
child: Text("改变状态"),
),
)
],
),
);
}
}
可以看到，如果 PageOne 需要自己管理状态，那继承 StatefulWidget，然后会需要实现createState函数，我们直接通过State 的setState函数就可以更改我们PageOne的状态，比较简单的使用
Widget管理子Widget状态
既然是父管理子类，那父类Wiget肯定是可以改变状态的
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,
),
);
}
}
建一个ParentWidget 继承 StatefulWidget，实现createState方法，返回一个State
_ParentWidgetState类继承State，提供一个_handleTapboxChanged函数，参数bool类型，通过setState用来改变_active的值
实现build方法，在build里面，Container的child的对象是TapboxB，构造函数传递两个参数，_active和_handleTapboxChanged，下面来看看TapboxB里面的实现
TapboxB类
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],
),
),
);
}
}
TapboxB 继承 StatelessWidget，构造函数是两个参数active和onChanged，然后提供一个_handleTap函数，这个函数就是直接调用传过来的onChanged（onChanged就是一个方法），然后参数传!active，有代码经验的应该都知道是什么意思
然后在build方法里面，设置Text元素的点击事件为_handleTap，这样就可以达到改变自身状态（子widget）的效果了
总体流程就是父类提供一个方法改变状态，然后把这个方法通过子类构造函数传递到子类，然后子类需要的时候直接调用这个函数就可以到达修改状态的效果
混合状态管理
混合状态管理就是子widget和父widget共同去处理state，结合上面两种方法就可以了
ParentWidget不需要改变，TapboxB 类继承 StatefulWidget，在事件里面调用setState函数就可以了
class TapboxC extends StatefulWidget {
TapboxC({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
bool _highlight = false;
@override
_TapboxC createState() => _TapboxC();
}
class _TapboxC extends State<TapboxC> {
void _handleTap() {
widget.onChanged(!widget.active);
}
void _handleTapDown(TapDownDetails details) {
setState(() {
widget._highlight = true;
});
}
void _handleTapUp(TapUpDetails details) {
setState(() {
widget._highlight = false;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new GestureDetector(
onTapDown: _handleTapDown, // 处理按下事件
onTapUp: _handleTapUp, // 处理抬起事件
onTap: _handleTap,
child: new Container(
child: new Center(
child: new Text(
widget.active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
border: widget._highlight
? new Border.all(
color: Colors.teal[700],
width: 10.0,
)
: null,
),
),
);
}
}
新建一个TapboxC类，继承StatefulWidget，还是跟上面一样，通过构造函数，接受两个参数，用来调用父类函数，改变状态
自定义一个state，加入一个变量_highlight，提供两个方法_handleTapDown和_handleTapUp（方法里面通过setState函数来改变变量状态），用来相应按下和抬起事件的处理
然后设置onTapDown和onTapUp事件，border属性靠_highlight变量改变，这样就达到了混合处理状态的模式，是不是很简单
全局State的管理
//订阅者回调签名
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();
看代码，简单的逻辑应该没问题，开始设计单例模式，然后定义一个_emap变量来保存任务队列，提供 on 和 off 函数来添加和移除任务队列，两个函数都要传一个EventCallback的回调，进行事件的监听回调，然后提供emit函数来触发事件，触发函数被调用之后，实际就是遍历循环整个_emap任务列表。
其实这就是一个简单的监听者模式，在需要监听事件的地方调用on来注册监听，在需要改变某个状态的地方，调用emit函数来触发事件，这样在监听的地方就可以收到回调，进行处理。
//页面A中
//监听登录事件
bus.on("login", (arg) {
// do something
});
//登录页B中
//登录成功后触发登录事件，页面A中订阅者会被调用
bus.emit("login", userInfo);
总结
Flutter的状态管理和原生移动开发的不同，基本就是如果需要改变一个UI元素的状态，就需要在一个State里面进行处理，不能直接调用某个"控件"的函数进行改变，其中有的元素不需要进行状态的改变，我们就继承StatelessWidget，如果需要改变就继承StatefulWidget，在StatefulWidget中自己控制自己的状态可以调用State的setState函数就可以直接改变了，父类要改变子类的状态，只需要把父类改变状态的函数传递给子类，让子类去调用函数就可以了，全局的状态管理我们写了一个监听者模式的事件总线，Flutter中有很多第三方的框架可以实现全局状态的管理，后面用到再学习，如果Flutter原生的功能能满足需求，也没必要过度的引入第三方的库，增加代码的复杂性。
网友评论