flutter之bloc使用详解

flutter中一切皆为Widget，因此在我们开发中，往往业务和UI逻辑写在一起，这样不利于代码维护，因此状态管理框架久诞生了，这篇就开始讲一讲Bloc。

对于Bloc库有两个，如下图：
在这里插入图片描述 flutter_bloc其实是对bloc的进一步封装，flutter_bloc引入了bloc库和provider库，是对bloc的进一步延伸。

bloc官方文档：https://bloclibrary.dev/#/zh-cn/coreconcepts

一.Bloc介绍

BLoC设计模式：BLoC模式的核心是Sink和Stream，它们用于处理输入和输出。通常，你会创建一个BLoC类，该类接收输入流并根据输入产生输出流。然后，UI组件订阅输出流以接收状态更新，并将用户操作发送到输入流。

Bloc有两种模式：

Bloc模式：该模式划分四层结构
在这里插入图片描述

bloc：逻辑层
state：数据层
event：所有的交互事件
view：页面

Cubit模式：该模式划分了三层结构

在这里插入图片描述

cubit：逻辑层
state：数据层
view：页面

Bloc模式和Cubit模式区别：

复杂度： BLoC：BLoC通常用于管理更复杂的业务逻辑和状态。它可以处理多个事件和多个状态，适用于大型、复杂的应用程序。
Cubit：Cubit的设计更简单，适用于处理较简单的状态和事件。它更适合于小型和中型应用程序，以及对状态管理模式不太熟悉的开发者。
事件和状态管理： BLoC：在BLoC中，事件和状态是分开管理的，你需要自己编写事件和状态的类，并在BLoC中进行映射。这使得BLoC更加灵活，但也更加复杂。
Cubit：Cubit将事件和状态合并到一个类中，称为Cubit类。这使得代码更加简洁，但在处理复杂的事件和状态时可能会变得混乱。
异步支持： BLoC：BLoC天生支持异步操作，可以轻松处理异步任务，例如网络请求。这是因为BLoC的mapEventToState方法可以返回Stream。
Cubit：Cubit也支持异步操作，但需要使用Emit函数来发射新的状态。

二.flutter_bloc简单使用

导入库：

flutter_bloc: ^8.1.3

这是一个插件，可选择使用，简化模版代码生成。安装flutter_bloc插件
在这里插入图片描述

使用案例：计数器

import 'package:flutter_bloc/flutter_bloc.dart';// 定义事件
enum CounterEvent { increment, decrement }class CounterBloc extends Bloc<CounterEvent, int> {CounterBloc() : super(0);@overrideStream<int> mapEventToState(CounterEvent event) async* {switch (event) {case CounterEvent.increment:yield state + 1;break;case CounterEvent.decrement:yield state - 1;break;}}
}

在页面中使用 Bloc：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';class CounterPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Counter App'),),body: BlocProvider(create: (context) => CounterBloc(),child: CounterView(),),);}
}class CounterView extends StatelessWidget {@overrideWidget build(BuildContext context) {final counterBloc = BlocProvider.of<CounterBloc>(context);return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [BlocBuilder<CounterBloc, int>(builder: (context, count) {return Text('Count: $count', style: TextStyle(fontSize: 24));},),SizedBox(height: 16),Row(mainAxisAlignment: MainAxisAlignment.center,children: [FloatingActionButton(onPressed: () {counterBloc.add(CounterEvent.increment);},child: Icon(Icons.add),),SizedBox(width: 16),FloatingActionButton(onPressed: () {counterBloc.add(CounterEvent.decrement);},child: Icon(Icons.remove),),],),],),);}
}

三.各种小部件

BlocBuilder

BlocBuilder<BlocA, BlocAState>(builder: (context, state) {// return widget here based on BlocA's state}
)

BlocBuilder是一个 Flutter 小部件，需要一个bloc和一个builder函数。BlocBuilder处理构建小部件以响应新状态。BlocBuilder与非常相似，StreamBuilder但具有更简单的 API，以减少所需的样板代码量。该builder函数可能会被多次调用，并且应该是一个纯函数，它返回一个小部件以响应状态。

BlocSelector

BlocSelector<BlocA, BlocAState, SelectedState>(selector: (state) {// return selected state based on the provided state.},builder: (context, state) {// return widget here based on the selected state.},
)

BlocSelector是一个 Flutter 小部件，它类似于BlocBuilder但允许开发人员通过基于当前块状态选择新值来过滤更新。如果所选值不更改，则会阻止不必要的构建。所选值必须是不可变的，以便BlocSelector准确确定是否builder应该再次调用。

BlocListener

BlocListener<BlocA, BlocAState>(listener: (context, state) {// do stuff here based on BlocA's state},child: Container(),
)

BlocListener是一个 Flutter 小部件，它采用BlocWidgetListener和一个可选参数bloc，并调用listener来响应块中的状态变化。它应该用于每次状态更改需要发生一次的功能，例如导航、显示 a SnackBar、显示 aDialog等…

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/127430.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！