BLoC(Business Logic Component)业务逻辑组件,是谷歌推出的一种可将业务组件(视图)与逻辑组件分离的新型架构思想;
BLoC是由事件来驱动的,通过主动发送事件来获取并调用该事件所对应的逻辑;
BLoC主要工程结构为bloc → event → state → view
bloc:负责具体逻辑的编写、逻辑与事件的绑定;
event::负责事件的定义;
state:负责声明需要监听状态的属性/变量;
view:视图;
BLoC插件的使用
1)在pubspec.yaml中引入flutter_bloc库,执行flutter pub get;
2)在Android Studio → Prefrences → Plugins 中搜索 flutter bloc,选择并下载插件;
3)插件下载后,在工程中lib路径下新建 new → flutter bloc,插件会自动生成模版代码;
输入Module Name后点击OK,自动生成以下文件
bloc层默认生成的模板代码
event层默认生成的代码
state层默认生成的代码
view层默认生成的代码
可以看到,在生成的模版代码中,已经默认将 bloc - event - state - view联系了起来,因此我们只需要关注我们的业务逻辑即可;
BLoC范式下逻辑的编写
需求:点击页面右下角的按钮,每点击一次,页面中间现实的数字+1;
1)UI基础布局
2)在event中声明计数事件
3)在state中声明需要管理状态的变量,并在init中将变量初始化,在clone中copy变量
4)在bloc中编写计数的逻辑
5)回到view中,在button的点击事件中发送AddCountEvent事件,并将需要监听状态的组件使用BlocBuilder包裹
以上便完成了在BLoC范式下,业务逻辑组件的编写。
Cubit范式下逻辑的编写
在创建BLoC模版的时候,也可以选择Cubit范式
Cubit是简化版的BLoC,将BLoC范式下的bloc、event文件合二为一,弱化了事件的作用,可应用于数据交互简单的页面;
Cubit范式生成的模板代码目录如下
我们接着用Cubit范式实现上面的计数器功能
1)UI基础布局
2)在state中声明需要管理状态的变量,并在init中将变量初始化,在clone中copy变量(与BLoC范式完全一致)
3)在cubit中编写计数的逻辑,状态修改后西药手动调用内置函数 emit(state.clone())
4)回到view中,在button的点击事件中调用cubit中的方法,并将需要监听状态的组件使用BlocBuilder包裹
以上便完成了在Cubit范式下,业务逻辑组件的编写。