Flutter BLoC原理图解及使用

介绍BLoC之前，先介绍几个相关的类及概念：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

前提概述

Stream流种类

1. 单订阅流：只能有一个订阅者
2. 多订阅流：可以多个订阅者，订阅前的消息不会收到

单订阅->多订阅：stream.asBroadcastStream()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

StreamBuilder API

使用Stream来构造UI，具体参考文档中的视频。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

StreamController的使用方式

下图是整个StreamController的工作方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

从sink.add传入值，对应输出stream流，可以做相应的流变换，然后对应监听此流的地方将接受到数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

RxDart

用于通过使用可观察序列来编写异步和基于事件的程序，具体文档参考：RxDart文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

增强版StreamController:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

1. PublishSubject: 普通广播的streamcontroll,可监听多次（默认异步）
2. BehaviorSubject: 缓存最新一次事件的广播流控制器
3. ReplaySubject : 缓存多个数据的广播流控制器，可以设定上限

每个xxSubject可以看成一个单元（后面备用）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Observable：可观察对象, 扩展Stream，组合了Streams和StreamTransformers（默认单一订阅）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

InheritedWidget

下面是InheritedWidget的工作方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Static T of(BuildContext context) => context.inheritFromWidgetOfExactType(T); final t = T.of(context)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

上面的怎么使用呢？在Child组件中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Root root = Root.of(context);//获取Root对象
root.data... // 使用root对象的变量等
复制代码

接下来切入正题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

状态管理：BLoC：Business Logic Component (业务逻辑组件）

BLoC是一个典型的观察者模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Flutter实现此设计模式，需要用到：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

1. BlocProvider组件：InheritedWidget 继承组件 + Bloc对象
2. Bloc类: Stream（dart）/ Subject(rxdart stream)

BlocProvider

BLoC类的几种用法及对应使用场景

Type1：最基本的初始化及使用

下图是对应Bloc的内部实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Type2: 事件转化State的方式：

Event->State (状态转化图)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

简单解读下： 此转化的原理是，通过发送一个event，经过一个普通广播PublishSubject， 到达中间监听处理器：eventHandler，作用是根据获得到的event做相应的异步处理，处理结束后，转化出一些相应的state返回出来 将返回的结果全部add到下来的BehaviorSubject中，由于BehaviorSubject的特性，传递并保留最新的一条结果。 UI监听到对应的state，然后做出不同的界面相应即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

举个小栗子：常用的加载数据的场景文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

下面是手写的Bloc中部分代码，仅供逻辑参考：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

  Stream<AbstractState> eventHandler(AbstractEvent event) async* {
      if (event is InitEvent) {
          yield LoadingState();
          final remoteData = await Request.fetchData();
          yield ResultData(remoteData);
      } else if (event is RefreshState) {
          final remoteData = await Request.fetchData();
          yield UpdateData(remoteData);
      }
  }
复制代码

Type3:注册、登录校验

PS: Mixin 为bloc类增加了两个功能，根据输入流，进行相应的校验邮箱和密码是否符合要求文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

Type4:购物列表实现

上图是有一个购物车列表页pageBloc 和 购物车里面的商品itemBloc组成 通过商品item的+-，事件流向到pageBloc, 监听pageBloc变化的红点数据进行相应变化 同时监听pageBloc的itemBloc进行判断是否在购物车进行返回对应bool值，标识是否在购物车 最后进行更新对应item的状态，变成+-号。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

具体代码参考： ShopItemBloc文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html

文尾： 以上相应的4种场景是从一个国外大牛文章总结出来的，文章比较长，读起来可能比较累，如果结合我的总结来阅读，相信应该可以很快的理解。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16048.html