源代码管理网站,全国失信人名单查询,wordpress最新评论样式,cc wordpressflutter中一切皆为Widget#xff0c;因此在我们开发中#xff0c;往往业务和UI逻辑写在一起#xff0c;这样不利于代码维护#xff0c;因此状态管理框架久诞生了#xff0c;这篇就开始讲一讲Bloc。
对于Bloc库有两个#xff0c;如下图#xff1a; 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模式区别 复杂度 BLoCBLoC通常用于管理更复杂的业务逻辑和状态。它可以处理多个事件和多个状态适用于大型、复杂的应用程序。 CubitCubit的设计更简单适用于处理较简单的状态和事件。它更适合于小型和中型应用程序以及对状态管理模式不太熟悉的开发者。 事件和状态管理 BLoC在BLoC中事件和状态是分开管理的你需要自己编写事件和状态的类并在BLoC中进行映射。这使得BLoC更加灵活但也更加复杂。 CubitCubit将事件和状态合并到一个类中称为Cubit类。这使得代码更加简洁但在处理复杂的事件和状态时可能会变得混乱。 异步支持 BLoCBLoC天生支持异步操作可以轻松处理异步任务例如网络请求。这是因为BLoC的mapEventToState方法可以返回Stream。 CubitCubit也支持异步操作但需要使用Emit函数来发射新的状态。
二.flutter_bloc简单使用
导入库
flutter_bloc: ^8.1.3这是一个插件可选择使用简化模版代码生成。安装flutter_bloc插件
使用案例计数器
import package:flutter_bloc/flutter_bloc.dart;// 定义事件
enum CounterEvent { increment, decrement }class CounterBloc extends BlocCounterEvent, int {CounterBloc() : super(0);overrideStreamint 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.ofCounterBloc(context);return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [BlocBuilderCounterBloc, 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
BlocBuilderBlocA, BlocAState(builder: (context, state) {// return widget here based on BlocAs state}
)BlocBuilder是一个 Flutter 小部件需要一个bloc和 一个builder函数。BlocBuilder处理构建小部件以响应新状态。BlocBuilder与 非常相似StreamBuilder但具有更简单的 API以减少所需的样板代码量。该builder函数可能会被多次调用并且应该是一个纯函数它返回一个小部件以响应状态。
BlocSelector
BlocSelectorBlocA, 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
BlocListenerBlocA, BlocAState(listener: (context, state) {// do stuff here based on BlocAs state},child: Container(),
)BlocListener是一个 Flutter 小部件它采用BlocWidgetListener和 一个可选参数bloc并调用listener来响应块中的状态变化。它应该用于每次状态更改需要发生一次的功能例如导航、显示 a SnackBar、显示 aDialog等…
