[Flutter开发]05.Flutter中的状态管理

2020-03-24  本文已影响0人  沈枫_ShenF

管理StatefulWidget的状态最常见的方法:

  1. Widget管理自己的状态。

  2. 父Widget管理子Widget状态。

  3. 混合管理(父Widget和子Widget都管理状态)。

  4. 全局管理。

那我们如何决策使用哪种管理方法,可以根据一些原则来做决定:

一. 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],
        ),
      ),
    );
  }
}

三. 混合状态管理

混合管理的方式就好理解了,以上两种方式都有,组件自身管理一些内部状态,而父组件管理一些其他外部状态。

四. 全局管理状态

有一些情况是需要状态能够在其他组件或者路由中进行同步的,比如设置页里可以设置语言状态,当状态一改变时,我们希望其他应用语言的组件能够同步,此时这种跨组件间的通信就要用到以下两种方案:

  1. 事件总线。

  2. 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,可以看下一篇文章

3. Redux。

上一篇下一篇

猜你喜欢

热点阅读