Flutter 学习之旅(四十四) Flutter 状态 BLoC学习

什么是BLoC

BLoC（Business Logic Component）是谷歌提出的一种设计模式，利用Flutter 响应式结构的特点,通过Stream 的方式实现了异步渲染界面,实现布局与业务分离的效果.

这句话中有2个重点,一个是异步渲染,另一个就是业务与布局分离,
以传统的计数器代码为例,我们想要实现这个功能其实是非常简单的

class TsmSimpleBLoCPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TsmSimpleBLoCState();
}

class _TsmSimpleBLoCState extends State<TsmSimpleBLoCPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple BLoC 学习'),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Text(count.toString()),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('+'),
        onPressed: () {
          setState(() {
            ++count;
          });
        },
      ),
    );
  }
}

使用了BLoC后的代码结构如下

class TsmSimpleBLoCPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState()=>_SimpleBLoCState();

}

class _SimpleBLoCState extends State<TsmSimpleBLoCPage>{

  _SimpleBLoC _bloc;
  @override
  void initState() {
    super.initState();
    _bloc=_SimpleBLoC.of();
  }
  @override
  void dispose() {
    _bloc.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple BLoC 学习'),
        centerTitle: true,
      ),
      body: StreamBuilder(
        stream:_bloc.outStream ,
        initialData: _bloc.data,
        builder: (context,snap){
          return Container(
            alignment: Alignment.center,
            child: Text(snap.data.toString(),style: TextStyle(fontSize: 18),),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('+'),
        onPressed: (){
          _bloc.add();
        },
      ),
    );
  }
}

class _SimpleBLoC{
  int _data;
   StreamController _streamController;
  _SimpleBLoC.of(){
     _streamController=StreamController<int>();
     _data=0;
  }

  dispose(){
    _streamController.close();
  }
  get outStream=>_streamController.stream;

  get data=>_data;

  add(){
    _streamController.sink.add(++_data);
  }
}

使用了BLoC 后,代码变得更多了,那么为什么还要使用他呢,如果你是一个android 开发的话,看起来是不是和MVP结构有点类似, 将逻辑代码与UI分离开,在state 的 build Widget 的方法内没有一行是关于业务逻辑的,在bloc 模块没有一行是关于布局的,这点主要是为了避免Widget 中嵌套了太多关于业务逻辑的判断,导致随着业务发展难以维护,虽然看到有网上说这么做是减少build 的次数,但是看了StreamBuilder 的源码发现,他用来更新widget的方法就是setState 的方法,并没有减少build的次数,只是通过观察者模式减少了业务与数据之间的关系
在使用bloc的过程中尽量使用StatefulWidget,这样你可以使用 dispose 方法来关闭stream ,减少内存泄露

我们先来看一下StreamBuilder 的源码,再来自己封装一个BLoC形式的StatefulWidget,以便于加深印象

class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>> {
  const StreamBuilder({
    Key key,
    this.initialData,
    Stream<T> stream,
    @required this.builder,
  }) : assert(builder != null),
       super(key: key, stream: stream);
  final T initialData;
  @override
  AsyncSnapshot<T> initial() => AsyncSnapshot<T>.withData(ConnectionState.none, initialData);
  @override
  AsyncSnapshot<T> afterConnected(AsyncSnapshot<T> current) => current.inState(ConnectionState.waiting);
  @override
  AsyncSnapshot<T> afterData(AsyncSnapshot<T> current, T data) {
    return AsyncSnapshot<T>.withData(ConnectionState.active, data);
  }
  @override
  AsyncSnapshot<T> afterError(AsyncSnapshot<T> current, Object error) {
    return AsyncSnapshot<T>.withError(ConnectionState.active, error);
  }
  @override
  AsyncSnapshot<T> afterDone(AsyncSnapshot<T> current) => current.inState(ConnectionState.done);
  @override
  AsyncSnapshot<T> afterDisconnected(AsyncSnapshot<T> current) => current.inState(ConnectionState.none);
  @override
  Widget build(BuildContext context, AsyncSnapshot<T> currentSummary) => builder(context, currentSummary);
}

入参接收了一个initialData,在初始化AsyncSnapshot 的时候将这个initialData 添加进去,其他方便并没有什么逻辑,继续看他的父类

abstract class StreamBuilderBase<T, S> extends StatefulWidget {
  const StreamBuilderBase({ Key key, this.stream }) : super(key: key);
  final Stream<T> stream;
  S initial();
  S afterConnected(S current) => current;
  S afterData(S current, T data);
  S afterError(S current, Object error) => current;
  S afterDone(S current) => current;
  S afterDisconnected(S current) => current;

  Widget build(BuildContext context, S currentSummary);

  @override
  State<StreamBuilderBase<T, S>> createState() => _StreamBuilderBaseState<T, S>();
}

class _StreamBuilderBaseState<T, S> extends State<StreamBuilderBase<T, S>> {
  StreamSubscription<T> _subscription;
  S _summary;

  @override
  void initState() {
    super.initState();
    _summary = widget.initial();
    _subscribe();
  }
  
  @override
  void didUpdateWidget(StreamBuilderBase<T, S> oldWidget) {
    super.didUpdateWidget(oldWidget);
    ///前后的数据源不同,先取消注册,再重新注册,
    if (oldWidget.stream != widget.stream) {
      if (_subscription != null) {
        _unsubscribe();
        _summary = widget.afterDisconnected(_summary);
      }
      _subscribe();
    }
  }

  @override
  Widget build(BuildContext context) => widget.build(context, _summary);
  
///在控件移出的时候取消注册
  @override
  void dispose() {
    _unsubscribe();
    super.dispose();
  }
  ///添加各种监听
  void _subscribe() {
    if (widget.stream != null) {
      _subscription = widget.stream.listen((T data) {
        setState(() {
          _summary = widget.afterData(_summary, data);
        });
      }, onError: (Object error) {
        setState(() {
          _summary = widget.afterError(_summary, error);
        });
      }, onDone: () {
        setState(() {
          _summary = widget.afterDone(_summary);
        });
      });
      _summary = widget.afterConnected(_summary);
    }
  }
  
//取消注册
  void _unsubscribe() {
    if (_subscription != null) {
      _subscription.cancel();
      _subscription = null;
    }
  }
}

和包裹inheritedwidget 的statefulwidget 的使用方式基本是保持一致的,在initState 和dispose 方法中分别添加和移除监听,在didUpdateWidget方法中如果有必要则重置监听,在build 的方法内向下暴露当前的data

接下来我们利用StatefulWidget 与 StreamBuilder 封装一个简单的bloc 的base类,方便使用,

abstract class TsmBaseBLoC{

  /**
   *  用来调用 streamcontroller.close()
   */
  void dispose();
}


class TsmBaseBLoCWidget<T extends TsmBaseBLoC > extends StatefulWidget{
  final Widget child;
  final T bloc;
  TsmBaseBLoCWidget({Key key, @required this.child, @required this.bloc}):super(key:key);
  @override
  State<StatefulWidget> createState() =>_TsmBaseBLoCState<T>();
  /**
   * 便于子Widget 通过此方法向上
   * 此方法不能在 TsmBaseBLoCWidget 的child直接使用,需要使用StatelessWidget 或者StatefulWidget
   * 包裹一层,原因是 在findAncestorWidgetOfExactType 这个方法是直接查找他们_parent ,并没有比对自身
   * 他的直接 包裹的子Widget 的bloc 直接使用初始化的就可以了,
   *
   */
  static T of<T extends TsmBaseBLoC>(BuildContext context){
    TsmBaseBLoCWidget<T> provider = context.findAncestorWidgetOfExactType<TsmBaseBLoCWidget<T>>();
    return provider.bloc;
  }

}

class _TsmBaseBLoCState<T> extends State<TsmBaseBLoCWidget>{
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
  @override
  void dispose() {
    widget.bloc.dispose();
    super.dispose();
  }
}

封装后自动实现自动streamcontroller.close 和 在TsmBaseBLoCWidget 的子 StatelessWidget 与StatefulWidget中可以使用var_bloc=TsmBaseBLoCWidget.of<T>(context);来获取该 bloc,

关于findAncestorWidgetOfExactType 方法引起的血案

这个方法的意思向上查找祖先widget,找到第一个符合条件的widget为止,既然是这样,正常情况下A页面启动B页面,是不是会通过 A页面加载B页面呢,这样B页面也就继承了A页面的某些特性,答案肯定不是这样的,先来分析一下如果我们这么做会出现什么问题
1> widget 树结构太复杂,打开的widget 的深度越深 则这个widget中包含所有widget的特性,数据量太大,这个太容易导致oom了,
2> 如果从InheritedWidget 方面来说,如果A启动B,B就会继承A的特性,设计这个InheritedWidget 就完全没有必须要了,

再来从代码上面来讲,打开一个页面使用的Navigator,我看了一下Navigator.of的方法,看一下他是如何实现的,

  static NavigatorState of(
    BuildContext context, {
    bool rootNavigator = false,
    bool nullOk = false,
  }) {
    // Handles the case where the input context is a navigator element.
    NavigatorState navigator;
    if (context is StatefulElement && context.state is NavigatorState) {
        navigator = context.state as NavigatorState;
    }
    if (rootNavigator) {///找到最顶层NavigatorState  ,即MaterialApp 的 navigatorKey
      navigator = context.findRootAncestorStateOfType<NavigatorState>() ?? navigator;
    } else {
    ///找到最近NavigatorState
      navigator = navigator ?? context.findAncestorStateOfType<NavigatorState>();
    }
    return navigator;
  }

在Navitagor.of的方法我们发现他需要一个rootNavigator ,来控制他是获取整个App根NavigatorState 还是向上查找最近一个NavigatorState,
那也就可以理解在整个app中是可以存在多个 NavigatorState, 这样就实现了根NavigatorState 控制了整个app的风格, 最近的NavigatorState 作为模块的根NavigatorState 控制着必要的数据,实现在一个模块共享一些必须的信息,为什么要这么设计,我先来说一下我的需求,以一个机票改期为例, 改期的第一步需要获取到需要改期的行程,根据这个原始行程你需要经过选择日历的界面,选择新航班的页面,选择新仓位的页面,新的确认订单页面,如果你使用的是app 的根NavigatorState,所有的页面是平级的,他们之间不能使用InheritedWidget共享数据 ,将这个数据放在根NavigatorState共享给其他模块又没有什么意义,你如果在选择需要改期的行程页面创建这个NavigatorState , 这个NavigatorState 承接了根NavigatorState 的theme数据,同时又可以利用InheritedWidget 在这个NavigatorState 下面共享这个原始行程的数据,这样实现起来就非常完美了,

这些都是一些理论知识,由于Navigator和NavigatorState 他们是一个控件的整体,就像StatefulWidget 和State 一样,利用Navigator来创建页面我还没有看到,只是一些猜想,而这个灵感就是从findAncestorWidgetOfExactType 这样一个方法而来的,虽然因此思前想后的3个多小时,但是知识的进步真是一件令人愉快的事情
这个里面关于如何实现一个简单的Navigator,希望大家和我多多交流,在后续我也会多加关注这方面的源码,

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter