Flutter中的状态管理-BLoC插件的使用

平安喜乐

BLoC(Business Logic Component)业务逻辑组件,是谷歌推出的一种可将业务组件(视图)与逻辑组件分离的新型架构思想;

BLoC是由事件来驱动的,通过主动发送事件来获取并调用该事件所对应的逻辑;

BLoC主要工程结构为bloc → event → state → view
bloc:负责具体逻辑的编写、逻辑与事件的绑定;
event::负责事件的定义;
state:负责声明需要监听状态的属性/变量;
view:视图;

BLoC插件的使用

1)在pubspec.yaml中引入flutter_bloc库,执行flutter pub get;


image2023-3-14_16-0-40.png

2)在Android Studio → Prefrences → Plugins 中搜索 flutter bloc,选择并下载插件;


image.png

3)插件下载后,在工程中lib路径下新建 new → flutter bloc,插件会自动生成模版代码;


image.png

输入Module Name后点击OK,自动生成以下文件


image.png

bloc层默认生成的模板代码


image.png

event层默认生成的代码


image.png

state层默认生成的代码


image.png

view层默认生成的代码


image.png

可以看到,在生成的模版代码中,已经默认将 bloc - event - state - view联系了起来,因此我们只需要关注我们的业务逻辑即可;

BLoC范式下逻辑的编写

需求:点击页面右下角的按钮,每点击一次,页面中间现实的数字+1;

1)UI基础布局


image.png

2)在event中声明计数事件


image.png

3)在state中声明需要管理状态的变量,并在init中将变量初始化,在clone中copy变量


image.png

4)在bloc中编写计数的逻辑


image.png

5)回到view中,在button的点击事件中发送AddCountEvent事件,并将需要监听状态的组件使用BlocBuilder包裹


image.png

以上便完成了在BLoC范式下,业务逻辑组件的编写。

Cubit范式下逻辑的编写

在创建BLoC模版的时候,也可以选择Cubit范式


image.png

Cubit是简化版的BLoC,将BLoC范式下的bloc、event文件合二为一,弱化了事件的作用,可应用于数据交互简单的页面;

Cubit范式生成的模板代码目录如下


image.png

我们接着用Cubit范式实现上面的计数器功能

1)UI基础布局


image.png

2)在state中声明需要管理状态的变量,并在init中将变量初始化,在clone中copy变量(与BLoC范式完全一致)


image.png

3)在cubit中编写计数的逻辑,状态修改后西药手动调用内置函数 emit(state.clone())


image.png

4)回到view中,在button的点击事件中调用cubit中的方法,并将需要监听状态的组件使用BlocBuilder包裹


image.png

以上便完成了在Cubit范式下,业务逻辑组件的编写。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容