序言
在flutter
开发中,我们使用 bloc 框架,基于状态变更进行响应式开发。本篇文章,小轰将 bloc
核心业务块进行拆解简化,聊一聊它的实现思想,bloc 核心能力分为如下两点:
- 添加事件
event
,将 '事件流' 转换为 '状态流'state
- 监听
bloc
流,每次state
状态变更,通知widget
更新
下面,用自定义Bloc的方式,来给大家讲解一下Bloc的原理构造
1. 事件流 > 状态流 (中转)
首先,我们将bloc
代码简化,我们来看看bloc
如何将事件流转换为状态流。简化代码如下:
dart
import 'dart:async';
abstract class ACubit<State> {
StreamController<State> _controller = StreamController<State>.broadcast();
State _state;
State get state => _state;
ACubit(this._state);
///发送State状态到流里面
void emit(State state) {
if (_controller.isClosed) return;
if (state == _state) return;
_state = state;
_controller.add(_state);
}
///提供方法外部监听State
StreamSubscription<State> listen(
void Function(State state) onData, {
Function onError,
void Function() onDone,
bool cancelOnError,
}) {
return _controller.stream.listen(
onData,
onError: onError,
onDone: onDone,
cancelOnError: cancelOnError,
);
}
Future<void> close() {
return _controller.close();
}
}
ACubit
提供最基础的能力。提供listen
方法给外部监听 'State' 变更;emit
方法用来响应state
状态变更。
dart
abstract class ABloc<Event, State> extends ACubit<State> {
final _eventController = StreamController<Event>.broadcast();
ABloc(State initState) : super(initState) {
_bindEventToState();
}
///发送事件
void add(Event event) {
if (_eventController.isClosed) return;
_eventController.add(event);
}
///需上层实现 (根据event转成state)
Stream<State> mapEventToState(Event event);
///将事件流(event)转换成状态流(state)
_bindEventToState() {
_eventController.stream
// asyncExpand 将流内容进行类型转换,结果还是流
.asyncExpand((event) => mapEventToState(event))
.listen((nextState) {
///将nextState与当前state进行比对,比对成功后放入流中
emit(nextState);
});
}
}
ABloc
是我们直接使用的基类。在构造函数中调用了_bindEventToState
将事件流转换为状态流。
2. 使用 BlocBuilder 实时监听状态变更, 如何实现的呢?
小轰做了一个简化版的原理讲解:
dart
import 'package:flutter/material.dart';
import 'a_bloc.dart';
class BlocBuilder<T extends ACubit<S>, S> extends StatefulWidget {
final T cubit;
final Widget Function(BuildContext context, S state) builder;
const BlocBuilder({
Key key,
@required this.cubit,
@required this.builder,
}) : super(key: key);
@override
_BlocBuilderState<S> createState() => _BlocBuilderState<S>();
}
class _BlocBuilderState<S> extends State<BlocBuilder> {
void _update() {
setState(() {});
}
@override
void initState() {
///监听state状态变更
widget.cubit?.listen((_) {
_update();
});
super.initState();
}
@override
void dispose() {
widget.cubit?.close();
super.dispose();
}
@override
Widget build(BuildContext context){
return widget.builder(
context,
widget.cubit.state,
);
}
}
封装 BlocBuilder
- 构造函数中传入自定义的 bloc (继承
ABloc
),builder
传参用于获取每次state
变更通知。- 在
initState
初始化方法中对cubit
进行状态监听,每次状态变更直接调用setState
方法进行页面更新
调用示例如下:
dart
return BlocBuilder<CountBloc, CountState>(
cubit: CountBloc(CountState(1)),
builder: (context, state) {
return Container(...省略业务代码)
},
)
3. 开发工具推荐
在Flutter开发过程中,除了要掌握Bloc这样的状态管理框架外,还需要关注应用打包和上架流程。这里推荐使用appuploader这款iOS开发助手工具,它可以帮助开发者快速完成iOS应用的证书创建、描述文件配置、打包上传等流程,大大简化了App Store上架的复杂度。
appuploader的主要特点:
- 一键生成开发证书和发布证书
- 自动管理描述文件
- 支持批量处理多应用
- 可视化操作界面,降低使用门槛
对于使用Bloc框架开发的Flutter应用,在完成开发后,使用appuploader可以快速打包并提交到App Store审核,让开发者能够更专注于业务逻辑的实现。
总结
bloc 库中引用了provider等三方库。基于InheritedWidget
实现了数据共享能力。本篇文章,小轰只为演示Bloc核心的处理思想。详细请查阅Bloc源码。
扩展
InheritedProvider 实现数据共享 Bloc同时add两次只响应一次问题处理