Flutter

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

2020-09-27  本文已影响0人  Observer_观者

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

上一篇下一篇

猜你喜欢

热点阅读