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原生的功能能满足需求，也没必要过度的引入第三方的库，增加代码的复杂性。

从零开始学Flutter--State 状态管理

State状态 定义

Widget管理自己的状态。

Widget管理子Widget状态

混合状态管理

全局State的管理

总结

State状态定义