关于android-studio:flutterbloc使用解析骚年你还在手搭bloc吗

前言

首先，有很多的文章在说flutter bloc模式的利用，然而百分之八九十的文章都是在说，应用StreamController+StreamBuilder搭建bloc，晋升性能的会加上InheritedWidget，这些文章看了很多，真正写应用bloc作者开发的flutter_bloc却少之又少。没方法，只能去bloc的github下来找应用形式，最初去bloc官网翻文档。
各位靓仔，就不能好好说说flutter_bloc的应用吗？非要各种搬运bloc模式提出作者的那俩篇文章。当初，搞的杂家要本人去翻文档总结（手动滑稽）。

我的项目成果（倡议PC浏览器关上）

Bloc范例成果
Cubit范例成果

上面是Flutter_Bloc历程的一系列链接

Flutter_Bloc起源
Flutter_Bloc模式优化
Flutter_Bloc诞生
Flutter_Bloc官网文档
后面三个，是bloc作者写的bloc模式文档，典型的观察者模式的利用，最原始的就是java中CallBack模式。前俩篇文章就是咱们这些搬运工的次要“参考”的材料起源，这三篇文章在掘金上有翻译版，搜下bloc就能找到。最初一篇文章就是我次要总结演绎的源泉，作者在官网上写了好几个demo：计时器，登录，Todos，天气等等，大家能够本人去看看。

问题

首次应用flutter_bloc框架，可能会有几个疑难

state外面定义了太多变量，某个事件只须要更新其中一个变量，其它的变量赋雷同值麻烦
进入某个模块，进行初始化操作：简单的逻辑运算，网络申请等，入口在哪定义

成果

好了，哔哔了一堆，看下咱们要用flutter_bloc实现的成果。

间接开Chrome演示，大家在虚拟机上跑也一样。

援用

先阐明下，bloc给的api很多，不同的api针对与解决场景不同，我要是把官网那些api全抄过也没啥意义；不，也有可能能够装币，我要是不阐明，大家说不定认为是我本人总结的呢！哈哈。
OK，大家要是想晓得全场景的应用，能够去官网翻翻文档，我感觉学习一个模式或者框架的时候，最次要的是把主流程跑通，起码能够符合标准的堆页面，这样的话，就能够把这玩意用起来，再遇到想要的什么细节，就能够本人去翻文档，毕竟大体上曾经懂了，写过了几个页面，也有些领会，再去翻文档就很快能了解了。

库

flutter_bloc: ^6.0.6 #状态治理框架
equatable: ^1.2.3 #加强组件相等性判断

看看flutter_bloc都推到6.0了，别再用StreamController手搭Bloc了！

插件

在Android Studio设置的Plugins里，搜寻：Bloc

装置重启下，就OK了

右击相应的文件夹，抉择“Bloc Class”，我在main文件夹新建的，填入的名字：main，就主动生成上面三个文件；：main_bloc，main_event，main_state；main_view是我本人新建，用来写页面的。

是不是感觉，还在手动新建这些bloc文件low爆了；就如同fish_redux，不必插件，让我手动去创立那六个文件，写那些模板代码，真的要原地爆炸。

Bloc范例

初始化代码

来看下这三个生成的bloc文件：main_bloc，main_event，main_state

main_bloc：这里就是咱们次要写逻辑的页面了
- mapEventToState办法只有一个参数，前面主动带了一个逗号，格式化代码就分三行了，倡议删掉逗号，格式化代码。

class MainBloc extends Bloc<MainEvent, MainState> {
  MainBloc() : super(MainInitial());

  @override
  Stream<MainState> mapEventToState(
    MainEvent event,
  ) async* {
    // TODO: implement mapEventToState
  }
}

main_event：这里是执行的各类事件，有点相似fish_redux的action层

@immutable
abstract class MainEvent {}

main_state：状态数据放在这里保留，直达

@immutable
abstract class MainState {}

class MainInitial extends MainState {}

实现

阐明
- 这里对于简略的页面，state的应用形象状态继承实现的形式，未免有点麻烦，这里我进行一点小改变，state的实现类别有很多，官网写demo也有不必抽象类，间接class，相似实体类的形式开搞的。
- 老夫在代码关键点写上”///”类型正文，大家认真看看，拷进Android Studio外面，这些中央会变绿！大家好好领会下绿色代码！
main_bloc
- state变量是框架外部定义的，会默认保留上一次同步的MainSate对象的值

class MainBloc extends Bloc<MainEvent, MainState> {
  MainBloc() : super(MainState(selectedIndex: 0, isExtended: false));

  @override
  Stream<MainState> mapEventToState(MainEvent event) async* {
    ///main_view中增加的事件，会在此处回调，此处解决完数据，将数据yield，BlocBuilder就会刷新组件
    if (event is SwitchTabEvent) {
      ///获取到event事件传递过去的值,咱们拿到这值塞进MainState中
      ///间接在state上扭转外部的值,而后yield,只能触发一次BlocBuilder,它外部会比拟上次MainState对象,如果雷同,就不build
      yield MainState()
        ..selectedIndex = event.selectedIndex
        ..isExtended = state.isExtended;
    } else if (event is IsExtendEvent) {
      yield MainState()
        ..selectedIndex = state.selectedIndex
        ..isExtended = !state.isExtended;
    }
  }
}

main_event：在这里就能看见，view触发了那些事件了；保护起来也很爽，看看这里，也很快能懂页面在干嘛了

@immutable
abstract class MainEvent extends Equatable{
  const MainEvent();
}
///切换NavigationRail的tab
class SwitchTabEvent extends MainEvent{
  final int selectedIndex;

  const SwitchTabEvent({@required this.selectedIndex});

  @override
  List<Object> get props => [selectedIndex];
}
///开展NavigationRail,这个逻辑比较简单,就不必传参数了
class IsExtendEvent extends MainEvent{
  const IsExtendEvent();

  @override
  List<Object> get props => [];
}

main_state：state有很多种写法，在bloc官网文档上，不同我的项目state的写法也很多
- 这边变量名能够设置为私用，用get和set可选择性的设置读写权限，因为我这边设置的俩个变量全是必用的，读写均要，就设置私有类型，不必下划线“_”去标记公有了。
- 对于生成的模板代码，咱们在这：去掉@immutable注解，去掉abstract；
- 这里说下加上@immutable和abstract的作用，这边是为了标定不同状态，这种写法，会使得代码变得更加麻烦，用state不同状态去标定业务事件，代价太大，这边用一个变量去标定，很容易轻松代替

class MainState{
   int selectedIndex;
   bool isExtended;
  
   MainState({this.selectedIndex, this.isExtended});
}

main_view
- 这边就是咱们的界面层了，很简略，将须要刷新的组件，用BlocBuilder包裹起来，应用BlocBuilder：提供的state去赋值就ok了，context去增加执行的事件，context用StatelessWidget中提供的或者BlocBuilder提供的都行

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ///创立BlocProvider的，表明该Page，咱们是用MainBloc，MainBloc是属于该页面的Bloc了
    return BlocProvider(
      create: (BuildContext context) => MainBloc(),
      child: BodyPage(),
    );
  }
}

class BodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bloc')),
      body: totalPage(),
    );
  }
}

Widget totalPage() {
  return Row(
    children: [
      navigationRailSide(),
      Expanded(child: Center(
        child: BlocBuilder<MainBloc, MainState>(builder: (context, state) {
          ///看这看这：刷新组件！
          return Text("selectedIndex:" + state.selectedIndex.toString());
        }),
      ))
    ],
  );
}

//减少NavigationRail组件为侧边栏
Widget navigationRailSide() {
  //顶部widget
  Widget topWidget = Center(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
                image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3383029432,2292503864&fm=26&gp=0.jpg"),
                fit: BoxFit.fill),
          )),
    ),
  );

  //底部widget
  Widget bottomWidget = Container(
    child: BlocBuilder<MainBloc, MainState>(
      builder: (context, state) {
        return FloatingActionButton(
          onPressed: () {
            ///增加NavigationRail开展,膨胀事件
            context.bloc<MainBloc>().add(IsExtendEvent());
          },
          ///看这看这：刷新组件！
          child: Icon(state.isExtended ? Icons.send : Icons.navigation),
        );
      },
    ),
  );

  return BlocBuilder<MainBloc, MainState>(builder: (context, state) {
    return NavigationRail(
      backgroundColor: Colors.white12,
      elevation: 3,
      ///看这看这：刷新组件！
      extended: state.isExtended,
      labelType: state.isExtended ? NavigationRailLabelType.none : NavigationRailLabelType.selected,
      //侧边栏中的item
      destinations: [
        NavigationRailDestination(
            icon: Icon(Icons.add_to_queue),
            selectedIcon: Icon(Icons.add_to_photos),
            label: Text("测试一")),
        NavigationRailDestination(
            icon: Icon(Icons.add_circle_outline),
            selectedIcon: Icon(Icons.add_circle),
            label: Text("测试二")),
        NavigationRailDestination(
            icon: Icon(Icons.bubble_chart),
            selectedIcon: Icon(Icons.broken_image),
            label: Text("测试三")),
      ],
      //顶部widget
      leading: topWidget,
      //底部widget
      trailing: bottomWidget,
      selectedIndex: state.selectedIndex,
      onDestinationSelected: (int index) {
        ///增加切换tab事件
        context.bloc<MainBloc>().add(SwitchTabEvent(selectedIndex: index));
      },
    );
  });
}

Bloc范例优化

反思

从下面的代码来看，理论存在几个隐式问题，这些问题，刚开始应用时候，没异样的感觉，然而应用bloc久了后，感觉必定越来越强烈

state问题
- 初始化问题：这边初始化是在bloc里，间接在构造方法外面赋初值的，state中一旦变量多了，还是这么写，会感觉极其好受，不好治理。须要优化
- 能够看见这边咱们只改变selectedIndex或者isExtended；另一个变量不须要变动，须要放弃上一次的数据，进行了此类：state.selectedIndex或者state.isExtended赋值，一旦变量达到十几个乃至几十个，还是如此写，是让人极其解体的。须要优化
bloc问题
- 如果进行一个页面，须要进行简单的运算或者申请接口后，能力通晓数据，进行赋值，这里必定须要一个初始化入口，初始化入口须要怎么去定义呢？

优化实现

这边残缺走一下流程，让大家能有个残缺的思路

state：首先来看看咱们对state中的优化，这边进行了俩个很重要优化，减少俩个办法：init()和clone()
- init()：这里初始化对立用init()办法去治理
- clone()：这边克隆办法，是十分重要的，一旦变量达到俩位数以上，就能粗浅领会该办法是如许的重要

class MainState {
  int selectedIndex;
  bool isExtended;

  ///初始化办法,根底变量也须要赋初值,不然会报空异样
  MainState init() {
    return MainState()
      ..selectedIndex = 0
      ..isExtended = false;
  }

  ///clone办法,此办法实现参考fish_redux的clone办法
  ///也是对官网Flutter Login Tutorial这个demo中copyWith办法的一个优化
  ///Flutter Login Tutorial（https://bloclibrary.dev/#/flutterlogintutorial）
  MainState clone() {
    return MainState()
      ..selectedIndex = selectedIndex
      ..isExtended = isExtended;
  }
}

event
- 这边定义一个MainInit()初始化办法，同时去掉Equatable继承，在我目前的应用中，感觉它用途不大。。。

@immutable
abstract class MainEvent {}

///初始化事件,这边目前不须要传什么值
class MainInitEvent extends MainEvent {}

///切换NavigationRail的tab
class SwitchTabEvent extends MainEvent {
  final int selectedIndex;

  SwitchTabEvent({@required this.selectedIndex});
}

///开展NavigationRail,这个逻辑比较简单,就不必传参数了
class IsExtendEvent extends MainEvent {}

bloc
- 这减少了初始化办法，请留神，如果须要进行异步申请，同时须要将相干逻辑提炼一个办法，咱们在这里配套Future和await就能解决在异步场景下同步数据问题
- 这里应用了克隆办法，能够发现，咱们只有关注本人须要扭转的变量就行了，其它的变量都在外部赋值好了，咱们不须要去关注；这就大大的便捷了页面中有很多变量，只须要变动一俩个变量的场景
- 留神：如果变量的数据未扭转，界面相干的widget是不会重绘的；只会重绘变量被扭转的widget

class MainBloc extends Bloc<MainEvent, MainState> {
  MainBloc() : super(MainState().init());

  @override
  Stream<MainState> mapEventToState(MainEvent event) async* {
    ///main_view中增加的事件，会在此处回调，此处解决完数据，将数据yield，BlocBuilder就会刷新组件
    if (event is MainInitEvent) {
      yield await init();
    } else if (event is SwitchTabEvent) {
      ///获取到event事件传递过去的值,咱们拿到这值塞进MainState中
      ///间接在state上扭转外部的值,而后yield,只能触发一次BlocBuilder,它外部会比拟上次MainState对象,如果雷同,就不build
      yield switchTap(event);
    } else if (event is IsExtendEvent) {
      yield isExtend();
    }
  }

  ///初始化操作,在网络申请的状况下,须要应用如此办法同步数据
  Future<MainState> init() async {
    return state.clone();
  }

  ///切换tab
  MainState switchTap(SwitchTabEvent event) {
    return state.clone()..selectedIndex = event.selectedIndex;
  }

  ///是否开展
  MainState isExtend() {
    return state.clone()..isExtended = !state.isExtended;
  }
}

view
- view层代码太多，这边只减少了个初始化事件，就不从新把全副代码贴出来了，初始化操作间接在创立的时候，在XxxBloc上应用add()办法就行了，就能起到进入页面，初始化一次的成果；add()办法也是Bloc类中提供的，遍历事件的时候，就顺便查看了add()这个办法是否增加了事件；阐明，这是框架顺便提供了一个初始化的办法
- 这个初始化形式是在官网示例找到的
  - 我的项目名：Flutter Infinite List Tutorial
  - 我的项目地址：flutter-infinite-list-tutorial

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      ///在MainBloc上应用add办法,增加初始化事件
      create: (BuildContext context) => MainBloc()..add(MainInitEvent()),
      child: BodyPage(),
    );
  }
}
///下方其余代码省略...........

搞定

OK，通过这样的优化，解决了几个痛点。理论在view中重复是要用BlocBuilder去更新view，写起来有点麻烦，这里咱们能够写一个，将其中state和context变量，往提出来的Widget办法传值，也是蛮不错的
大家放弃观察者模式的思维就行了；观察者（回调刷新控件）和被观察者（产生相应事件，增加事件，去告诉观察者），bloc层是处于观察者和被观察者两头的一层，咱们能够在bloc外面搞业务，搞逻辑，搞网络申请，不能搞基；拿到Event事件传递过去的数据，把解决好的、符合要求的数据返回给view层的观察者就行了。
应用框架，不拘泥框架，在观察者模式的思维上，灵便的去应用flutter_bloc提供Api，这样能够大大的缩短咱们的开发工夫！

Cubit范例

Cubit是Bloc模式的一种简化版，去掉了event这一层，对于简略的页面，用Cubit来实现，开发体验是大大的好啊，上面介绍下该种模式的写法

创立

首先创立Cubit一组文件，抉择“Cubit Class”，点击，新建名称填写：Counter

新建好后，他会生成俩个文件：counter_cubit，counter_state，来看下生成的代码

原始生成代码

counter_cubit

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(CounterInitial());
}

counter_state

@immutable
abstract class CounterState {}

class CounterInitial extends CounterState {}

依照生成的这种state形式去写，比拟麻烦，这边调整下

调整后代码

counter_cubit

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(CounterState().init());
}

counter_state

class CounterState {
  ///初始化办法
  CounterState init() {
    return CounterState();
  }

  ///克隆办法,针对于刷新界面数据
  CounterState clone() {
    return CounterState();
  }
}

OK，这样调整了下，上面写起来就会难受很多，也会很省事

实现计时器

来实现下一个灰常简略的计数器

成果

来看下实现成果吧，这边不上图了，大家点击上面的链接，能够间接体验Cubit模式写的计时器
实现成果：点我体验实际效果

实现

实现很简略，三个文件就搞定，看下流程：state -> cubit -> view

state：这个很简略，加个计时变量

class CounterState {
  int count;

  CounterState init() {
    return CounterState()..count = 0;
  }

  CounterState clone() {
    return CounterState()..count = count;
  }
}

cubit
- 这边加了个自增办法：increase()
- event层理论是所有行为的一种整合，不便对逻辑过于简单的页面，所有行为的一种保护；然而过于简略的页面，就那么几个事件，还独自保护，就没什么必要了
- 在cubit层写的公共办法，在view外面能间接调用，更新数据应用：emit()
- cubit层应该能够算是：bloc层和event层一种联合后的简写

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(CounterState().init());

  ///自增
  void increase() => emit(state.clone()..count = ++state.count);
}

view
- view层的代码就非常简单了，点击办法外面调用cubit层的自增办法就ok了

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => CounterCubit(),
      child: BlocBuilder<CounterCubit, CounterState>(builder: _counter),
    );
  }

  Widget _counter(BuildContext context, CounterState state) {
    return Scaffold(
      appBar: AppBar(title: const Text('Cubit范例')),
      body: Center(
        child: Text('点击了 ${state.count} 次', style: TextStyle(fontSize: 30.0)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.bloc<CounterCubit>().increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

总结

在Bloc模式外面，如果页面不是过于简单，应用Cubit去写，根本齐全够用了；然而如果业务过于简单，还是须要用Bloc去写，须要将所有的事件行为治理起来，便于前期保护

OK，Bloc的简化模块，Cubit模式就这样讲完了，对于本人业务写的小我的项目，我就常常用这个Cubit去写

最初

Bloc还有很多Api针对不同的场景十分的实用，例如：MultiBlocProvider，BlocListener，MultiBlocListener，BlocConsumer等等，这外面有些Api和Provider的Api是十分类似的，例如MultiXxxxx，这都是为了缩小嵌套，提供多个全局Bloc而提供，大家能够去瞧瞧看，用法也都十分的类似
Cubit范例代码地址
- Cubit范例代码
Bloc范例代码地址
- Bloc范例代码
flutter_bloc相干Api白嫖地址
- flutter_bloc相干Api
flutter_bloc
- GitHub：https://github.com/felangel/bloc
- Pub：https://pub.dev/packages/flutter_bloc

关于android-studio:flutterbloc使用解析骚年你还在手搭bloc吗

前言

问题

成果

援用

库

插件

Bloc范例

初始化代码

实现

Bloc范例优化

反思

优化实现

搞定

Cubit范例

创立

原始生成代码

调整后代码

实现计时器

成果

实现

总结

最初

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于android-studio:flutterbloc使用解析骚年你还在手搭bloc吗

前言

问题

成果

援用

库

插件

Bloc范例

初始化代码

实现

Bloc范例优化

反思

优化实现

搞定

Cubit范例

创立

原始生成代码

调整后代码

实现计时器

成果

实现

总结

最初

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复