目录
  • 序言
    • 1. 事件流 > 状态流 （中转）
    • 2. 使用 BlocBuilder 实时监听状态变更， 如何实现的呢？
  • 总结
    • 扩展

      序言

      在flutter开发中，我们使用 bloc 框架，基于状态变更进行响应式开发。本篇文章，小轰将 bloc 核心业务块进行拆解简化，聊一聊它的实现思想，bloc 核心能力分为如下两点：

      • 添加事件 event，将 '事件流' 转换为 '状态流' state
      • 监听 bloc 流，每次 state 状态变更，通知 widget 更新

      下面，用自定义Bloc的方式，来给大家讲解一下Bloc的原理构造

      1. 事件流 > 状态流 （中转）

      首先，我们将bloc代码简化，我们来看看bloc如何将事件流转换为状态流。简化代码如下：

      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状态变更。

      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 实时监听状态变更， 如何实现的呢？

      小轰做了一个简化版的原理讲解：

      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方法进行页面更新

      调用示例如下：

      return BlocBuilder<CountBloc, CountState>( cubit: CountBloc(CountState(1)), builder: (context, state) { return Container(...省略业务代码) }, )

      总结

      bloc 库中引用了provider 等三方库。基于InheritedWidget实现了数据共享能力。本篇文章，小轰只为演示Bloc核心的处理思想。详细请查阅Bloc源码。

      扩展

      InheritedProvider 实现数据共享 Bloc同时add两次只响应一次问题处理

      以上就是flutter Bloc 实现原理示例解析的详细内容，更多关于flutter Bloc 实现原理的资料请关注本网站其它相关文章！

      您可能感兴趣的文章:

      • Flutter在项目中使用动画不使用包实现详解
      • Flutter 移动程序安全性提高的八个建议
      • Flutter 阻止系统键盘弹出的优雅方式
      • flutter Bloc add两次只响应一次问题解析
      • 封装flutter状态管理工具示例详解
      • Flutter runApp到渲染上屏分析详解