flutter_bloc使用解析---骚年,你还在手搭bloc吗!

首先,有很多的文章在说flutter bloc模式的应用,但是百分之八九十的文章都是在说,使用StreamController+StreamBuilder搭建bloc,提升性能的会加上InheritedWidget,这些文章看了很多,真正写使用bloc作者开发的flutter_bloc却少之又少。没办法,只能去bloc的github上去找使用方式,最后去bloc官网翻文档。

蛋痛,各位叼毛,就不能好好说说flutter_bloc的使用吗?非要各种抄bloc模式提出作者的那俩篇文章。现在,搞的杂家这个伸手党要自己去翻文档总结(手动滑稽)。

表情1

项目效果(建议PC浏览器打开)

Bloc范例效果

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

Flutter_Bloc起源

Flutter_Bloc模式优化

Flutter_Bloc诞生

前面三个,是bloc作者写的bloc模式文档,典型的观察者模式的应用,最原始的就是java中CallBack形式。前俩篇文章就是咱们这些大抄子的主要“参考”的资料来源,这三篇文章在掘金上有翻译版,搜下bloc就能找到。最后一篇文章就是我主要总结归纳的源泉,作者在官网上写了好几个demo:计时器,登录,Todos,天气等等,大家可以自己去看看。

问题

初次使用flutter_bloc框架,可能会有几个疑问

state里面定义了太多变量,某个事件只需要更新其中一个变量,其它的变量赋相同值麻烦

进入某个模块,进行初始化操作:复杂的逻辑运算,网络请求等,入口在哪定义

效果

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

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文件

目录结构新建bloc文件

是不是觉得,还在手动新建这些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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsffpp.html