Flutter之Bloc模式
Flutter之Bloc模式全称Business Logic Component,业务逻辑组件BLoC 是独立处理业务逻辑(网络数据请求、数据处理等等的逻辑),通过流Stream的Sinks,streams发布监听业务处理后的数据,只关心业务处理。而Widget着重业务数据处理后的结果显示。将业务逻辑和UI分离。widget做UI展示,bloc做逻辑处理,model做数据封装。1.工作流程组件通过
Flutter之Bloc模式
全称Business Logic Component,业务逻辑组件
BLoC 是独立处理业务逻辑(网络数据请求、数据处理等等的逻辑),通过流Stream的Sinks,streams发布监听业务处理后的数据,只关心业务处理。而Widget着重业务数据处理后的结果显示。将业务逻辑和UI分离。
widget做UI展示,bloc做逻辑处理,model做数据封装。
1.工作流程
组件通过Sink向Bloc发送事件,BLoC接收到事件后执行内部逻辑处理,并把处理的结果通过流的方式通知给订阅事件流的组件。在BLoC的工作流程中,Sink接受输入,BLoC则对接受的内容进行处理,最后再以流的方式输出。可以发现,BLoC又是一个典型的观察者模式。
2.使用
项目采取Bloc+RxDart来开发
2.1Bloc实现原理
Bloc触发刷新的方式是使用StreamBuilder+StreamController。
Bloc另一重要特性就是跨层级获取bloc,在bloc可以获取到model或者调用方法。
其中使用了ancestorWidgetOfExactType,因为flutter widget是树状结构的,结构层次保存在BuildContext中,可以从子节点依次往父节点找符合类型的widget,所以所有使用了BlocProvider包裹的widget都可以通过of方法找到,再返回widget中的bloc。(bloc最终是保存在外一层的state中)。
final type = _typeOf<BlocProvider<T>>();
BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
2.2RxDart实现原理
StreamController实现了观察者模式,监听者不是直接被调用,而是处于观察状态,当事件加入streamController后,监听者获得异步回调。
RxDart是对StreamController的扩展,提供了更多的模式。分为两个部分Subject和Observable。
其中Observable对stream封装后提供多个处理方法,例如map、expand、merge、every、contact,可以对数据进行相应的遍历、合并等操作。
Subject是对StreamController的扩展,常用的有以下几种。
- PublishSubject:StreamController广播版,streamController只能有一个listener,PublishSubject可以多次listen。下面的其他几种Subject也都是广播版。
- BehaviorSubject: 缓存最近一次的事件。如果先发生事件,后listen,也能收到缓存的事件。
- ReplaySubject: 缓存所有的事件,之前加入的所有event,listen后,都会顺序发送过来。
3.实例
1.创建一个所有Bloc的通用基类BlocBase
abstract class BlocBase{
void dispose();
}
class BlocProvider<T extends BlocBase> extends StatefulWidget{
final T bloc;
final Widget child;
BlocProvider({
Key key,
@required this.child,
@required this.bloc,
}) : super(key: key);
@override
_BlocProviderState<T> createState() => new _BlocProviderState<T>();
static Type _typeOf<T>() => T;
static T of<T extends BlocBase>(BuildContext context){
final type = _typeOf<BlocProvider<T>>();
BlocProvider<T> provider = context.findAncestorWidgetOfExactType();
return provider.bloc;
}
}
class _BlocProviderState<T> extends State<BlocProvider<BlocBase>>{
@override
void dispose(){
widget.bloc.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return widget.child;
}
}
2.创建相对应的TestBloc,继承BlocBase。
Bloc 的初始化可以在任意父组件、子组件中,获取只需要使用
BlocProvider.of(context)
TestBloc _testBloc = BlocProvider.of(context);
2.1定义Subject
final _subject = PublishSubject<Model>();
2.2定义Stream
Stream<Model> get stream => _subject.stream;
2.3在业务逻辑内将数据添加到_subject中,业务逻辑不局限与IO流数据、网络请求数据等
void getData(){
...数据获取方法
_suject.sink.add(data)
}
需要注意,在TestBloc中的dispose中需要调用subject(streamController)close.
@override
void dispose() {
_subject.close();
}
2.4在widget中通过StreamBuilder来控制。
@override
Widget build(BuildContext context) {
// TODO: implement build
return StreamBuilder(
stream: stream,
builder: (BuildContext context, AsyncSnapshot<Price> snapshot) {
...widget展示数据
}
}
}
可以在最顶层父组件构建UI时设置BlocProvider(),具体的UI显示封装在page()中。
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar:(AppBar...),
body:BlocProvider(
bloc: TestBloc(),
child: page(),//显示的UI
),
),
);
}
4.综合
使用Bloc之后,数据与widget相关联,widget状态可以随数据的改变而改变。与setState()不同的是,Bloc可以局部刷新,只刷新与数据绑定的widget,不用全局刷新,setState()每次会全局刷新,提升了UI构建速度。

GitCode 天启AI是一款由 GitCode 团队打造的智能助手,基于先进的LLM(大语言模型)与多智能体 Agent 技术构建,致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话,还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力,真正做到“一句话,让 Al帮你完成复杂任务”。
更多推荐
所有评论(0)