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

可以看见这边我们只改动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

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

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