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

view层代码太多,这边只增加了个初始化事件,就不重新把全部代码贴出来了,初始化操作直接在创建的时候,在XxxBloc上使用add()方法就行了,就能起到进入页面,初始化一次的效果;add()方法也是Bloc类中提供的,遍历事件的时候,就特地检查了add()这个方法是否添加了事件;说明,这是框架特地提供了一个初始化的方法

这个初始化方式是在官方示例找到的

项目名: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

image-20201010155420462

新建好后,他会生成俩个文件: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()

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

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