平安喜乐

前置知识

想要弄懂BLoC的原理，需要先了解下Stream的相关知识。

StreamController、StreamBuilder这两者的搭配可以轻松实现widget的刷新，来看下使用：

定义view层，初始化用以处理页面数据刷新逻辑的StreamLogic实例，通过StreamBuilder并指定其初始数据、所需要的stream等参数，实现局部widget的刷新；
借用StatefulWidget中的dispose()方法，释放掉StreamLogic实例；

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:state_management_demo/stream_demo/stream_logic.dart';
import 'package:state_management_demo/stream_demo/stream_state.dart';

class StreamPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => StreamPageState();
}

class StreamPageState extends State<StreamPage> {
  final logic = StreamLogic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Page'),),
      body: Center(
        child: StreamBuilder<StreamState>(
          initialData: logic.state,
          stream: logic.stream,
          builder: (context, snapshot) {
            return Text(
              'current count: ${snapshot.data!.count}',
              style: TextStyle(color: Colors.black87, fontSize: 16),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          logic.addCount();
        },
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    logic.dispose();
    super.dispose();
  }
}

定义logic层，初始化用于存储数据的StreamState实例，初始化StreamController，通过泛型指定StreamController实例的数据源；

import 'dart:async';

import 'package:state_management_demo/stream_demo/stream_state.dart';

class StreamLogic {
  final state = StreamState();

  final _controller = StreamController<StreamState>.broadcast();
  Stream<StreamState> get stream => _controller.stream;

  addCount() {
    _controller.add(state..count += 1);
  }

  dispose() {
    _controller.close();
  }
}

定义state层

class StreamState {
  int count = 0;
}

通过以上代码，便可以实现一个简易的点击按钮刷新页面数据的功能，不过其中有如下几个问题：

• 需要手动创建Stream的一系列对象；
• Stream流必须要有关闭操作，所以需要使用StatefulWidget；
• 至少需要手动指定StreamBuilder得三个必传参数；

在BLoC中，作者通过Provider中的InheritedProvider控件，解决了以上痛点。

BLoC的刷新机制

BLoC的刷新机制，本质上就是对上述Stream的使用进行了封装，我们可以看看BLoC中几个关键类的实现；

BlocProvider

BlocProvider内部封装了Provider中的InheritedProvoider，用以实现刷新参数的精简与Stream流的关闭，我们来看看BlocProvider的源码：

mixin BlocProviderSingleChildWidget on SingleChildWidget {}

class BlocProvider<T extends BlocBase<Object?>>
    extends SingleChildStatelessWidget with BlocProviderSingleChildWidget {
  const BlocProvider({
    Key? key,
    required Create<T> create,
    this.child,
    this.lazy = true,
  })  : _create = create,
        _value = null,
        super(key: key, child: child);

  const BlocProvider.value({
    Key? key,
    required T value,
    this.child,
  })  : _value = value,
        _create = null,
        lazy = true,
        super(key: key, child: child);

  final Widget? child;

  final bool lazy;

  final Create<T>? _create;

  final T? _value;

  static T of<T extends BlocBase<Object?>>(
    BuildContext context, {
    bool listen = false,
  }) {
    try {
      return Provider.of<T>(context, listen: listen);
    } on ProviderNotFoundException catch (e) {
      if (e.valueType != T) rethrow;
      throw FlutterError(
        '''
        错误提示
        ''',
      );
    }
  }

  @override
  Widget buildWithChild(BuildContext context, Widget? child) {
    assert(
      child != null,
      '$runtimeType used outside of MultiBlocProvider must specify a child',
    );
    final value = _value;
    return value != null
        ? InheritedProvider<T>.value(
            value: value,
            startListening: _startListening,
            lazy: lazy,
            child: child,
          )
        : InheritedProvider<T>(
            create: _create,
            dispose: (_, bloc) => bloc.close(),
            startListening: _startListening,
            child: child,
            lazy: lazy,
          );
  }

  static VoidCallback _startListening(
    InheritedContext<BlocBase?> e,
    BlocBase value,
  ) {
    final subscription = value.stream.listen(
      (dynamic _) => e.markNeedsNotifyDependents(),
    );
    return subscription.cancel;
  }
}

BlocProvider和BlocProvider.value的区别：

• BlocProvider.value没有对其传入的Bloc做关闭操作，因此BlocProvider.value适用于全局Bloc实例；
• 单页面Bloc需要使用BlocProvider来创建相应的Bloc/Cubit；

BlocProvider.of方法

• 作用：可以被BlocProvider包裹的子控件中，通过BlocProvider.of获取BlocProvider.create时传入的XXXBloc实例；
• 依据InheritedProvoider的特性，只有在被BlocProvider包裹的子控件中可以获取到XXXBloc实例，BlocProvider的父布局无法获取；

create即外部实例化的XXXBloc，BlocProvider将其传入到其内部Provider的InheritedProvoider中

• _startListening方法其实没有起作用，根据Provider的特性，markNeedsNotifyDependents()方法需要通过与Provider.of(context, listen: true)配合使用才能生效，但在_startListening方法中，没有使用Provider.of(context, listen: true)来注册widget；

总结：

• BlocProvider会存储外部传入的XXXBloc实例，并存储在InheritedProvoider中；
• 可以通过BlocProvider.of方法获取BlocProvider中存储的XXXBloc实例（必须是BlocProvider的子控件）；
• 存储在BlocProvider中的XXXBloc实例会自动被释放，存储在BlocProvider.value中的XXXBloc实例不会自动被释放；

BlocProvider内部机制

BlocBase

BlocBase是一个抽象类，为我们自定义的Bloc提供了基础功能；

abstract class BlocBase<State>
    implements StateStreamableSource<State>, Emittable<State>, ErrorSink {
  BlocBase(this._state) {
    _blocObserver.onCreate(this);
  }
 
  final _blocObserver = BlocOverrides.current?.blocObserver ?? Bloc.observer;
 
  late final _stateController = StreamController<State>.broadcast();
 
  State _state;
 
  bool _emitted = false;
 
  @override
  State get state => _state;
 
  @override
  Stream<State> get stream => _stateController.stream;
 
  @override
  bool get isClosed => _stateController.isClosed;
 
  @protected
  @visibleForTesting
  @override
  void emit(State state) {
    try {
      if (isClosed) {
        throw StateError('Cannot emit new states after calling close');
      }
      if (state == _state && _emitted) return;
      onChange(Change<State>(currentState: this.state, nextState: state));
      _state = state;
      _stateController.add(_state);
      _emitted = true;
    } catch (error, stackTrace) {
      onError(error, stackTrace);
      rethrow;
    }
  }
 
  @protected
  @mustCallSuper
  void onChange(Change<State> change) {
    _blocObserver.onChange(this, change);
  }
 
  @protected
  @mustCallSuper
  @override
  void addError(Object error, [StackTrace? stackTrace]) {
    onError(error, stackTrace ?? StackTrace.current);
  }
 
 
  @protected
  @mustCallSuper
  void onError(Object error, StackTrace stackTrace) {
    _blocObserver.onError(this, error, stackTrace);
  }
 
  @mustCallSuper
  @override
  Future<void> close() async {
    await _stateController.close();
  }
}

BlocBase主要做了以下几件事：

• 存储了外部传入的state实例，每次使用emit()方法刷新时，会使用新的state实例替换旧的state；
• emit()方法中或做一个判断，如果传入的新state实例与旧的state相同，则不进行刷新操作；
• 初始化了Stream的一系列对象，封装了关闭Stream流的操作；

我们可以对BlocBase的代码进行一定的精简：

abstract class BlocBase<T> {
  BlocBase(this._state) {}
 
  final _stateController = StreamController<T>.broadcast();
 
  T _state;
 
  @override
  T get state => _state;
 
  @override
  Stream<T> get stream => _stateController.stream;
 
  void emit(T state) {
      if (_stateController.isClosed) return;
      if (state == _state) return;
      _state = state;
      _stateController.add(_state);
  }
 
  @mustCallSuper
  Future<void> close() async {
    await _stateController.close();
  }
}

这样可以比较直观的看出BlocBase内部的逻辑。

BlocBuilder

BlocBuilder是对StreamBuilder进行的一次封装，精简了其使用方式；

typedef BlocWidgetBuilder<S> = Widget Function(BuildContext context, S state);
 
typedef BlocBuilderCondition<S> = bool Function(S previous, S current);
 
class BlocBuilder<B extends BlocBase<S>, S> extends BlocBuilderBase<B, S> {
  const BlocBuilder({
    Key? key,
    required this.builder,
    B? bloc,
    BlocBuilderCondition<S>? buildWhen,
  }) : super(key: key, bloc: bloc, buildWhen: buildWhen);
 
  final BlocWidgetBuilder<S> builder;
 
  @override
  Widget build(BuildContext context, S state) => builder(context, state);
}

BlocBuilder中的buildWhen是判断是否需要更新的参数；
BlocBuilder内部只是调用了传入的builder，因此需要看下BlocBuilder的父类 —— BlocBuilderBase；

abstract class BlocBuilderBase<B extends BlocBase<S>, S>
    extends StatefulWidget {
  const BlocBuilderBase({Key? key, this.bloc, this.buildWhen})
      : super(key: key);
 
  final B? bloc;
 
  final BlocBuilderCondition<S>? buildWhen;
 
  Widget build(BuildContext context, S state);
 
  @override
  State<BlocBuilderBase<B, S>> createState() => _BlocBuilderBaseState<B, S>();
}
 
class _BlocBuilderBaseState<B extends BlocBase<S>, S>
    extends State<BlocBuilderBase<B, S>> {
  late B _bloc;
  late S _state;
 
  @override
  void initState() {
    super.initState();
    _bloc = widget.bloc ?? context.read<B>();
    _state = _bloc.state;
  }
 
  @override
  Widget build(BuildContext context) {
    if (widget.bloc == null) {
      context.select<B, bool>((bloc) => identical(_bloc, bloc));
    }
    return BlocListener<B, S>(
      bloc: _bloc,
      listenWhen: widget.buildWhen,
      listener: (context, state) => setState(() => _state = state),
      child: widget.build(context, _state),
    );
  }
}

BlocBuilderBase本质上是一个StatefulWidget，与其对应的_BlocBuilderBaseState相关联；
在_BlocBuilderBaseState中通过context.read<B>()方法获取我们在BlocProvider中传入的XXXBloc实例对象，context.read<B>()是对Provider.of<T>()的一次封装，效果相同，随后将获取到的XXXBloc实例对象、XXXBloc实例对象中的state实例保存在_BlocBuilderBaseState中；
_BlocBuilderBaseState中抽象了一个build方法，初始化了一个BlocListener实例，传入了_BlocBuilderBaseState内部保存的XXXBloc实例、state实例、buildWhen参数、build参数，在_BlocBuilderBaseState源码中并未发现数据刷新的逻辑，因此还需要继续看BlocListener的代码；

class BlocListener<B extends BlocBase<S>, S> extends BlocListenerBase<B, S>
    with BlocListenerSingleChildWidget {
  const BlocListener({
    Key? key,
    required BlocWidgetListener<S> listener,
    B? bloc,
    BlocListenerCondition<S>? listenWhen,
    Widget? child,
  }) : super(
          key: key,
          child: child,
          listener: listener,
          bloc: bloc,
          listenWhen: listenWhen,
        );
}

BlocListener内部无任何初始化外的操作，需要看下其父类BlocListenerBase；

abstract class BlocListenerBase<B extends BlocBase<S>, S>
    extends SingleChildStatefulWidget {
  const BlocListenerBase({
    Key? key,
    required this.listener,
    this.bloc,
    this.child,
    this.listenWhen,
  }) : super(key: key, child: child);
 
  final Widget? child;
 
  final B? bloc;
 
  final BlocWidgetListener<S> listener;
 
  final BlocListenerCondition<S>? listenWhen;
 
  @override
  SingleChildState<BlocListenerBase<B, S>> createState() =>
      _BlocListenerBaseState<B, S>();
}
 
class _BlocListenerBaseState<B extends BlocBase<S>, S>
    extends SingleChildState<BlocListenerBase<B, S>> {
  StreamSubscription<S>? _subscription;
  late B _bloc;
  late S _previousState;
 
  @override
  void initState() {
    super.initState();
    _bloc = widget.bloc ?? context.read<B>();
    _previousState = _bloc.state;
    _subscribe();
  }
 
  @override
  Widget buildWithChild(BuildContext context, Widget? child) {
    return child;
  }
 
  @override
  void dispose() {
    _unsubscribe();
    super.dispose();
  }
 
  void _subscribe() {
    _subscription = _bloc.stream.listen((state) {
      if (widget.listenWhen?.call(_previousState, state) ?? true) {
        widget.listener(context, state);
      }
      _previousState = state;
    });
  }
 
  void _unsubscribe() {
    _subscription?.cancel();
    _subscription = null;
  }
}

关键代码都在BlocListenerBase里了：

• BlocListenerBase能内部保存传进来的XXXBloc实例，并通过XXXBloc实例获取state实例；
• 通过_bloc.stream.listen方法，监听XXXBloc内部stream流的变化，由于stream流监听的是特定的state类型，因此可以直接获取状态改变后的新state实例；
• widget.listener()是真正实现刷新数据的方法，具体实现由外部传入，在BlocBuilderBase中，传入的是setState()方法；

我们可以对BlocBuilder的实现进行一定的精简，只保留其数据刷新的核心逻辑；

class NewBlocBuilder<B extends BlocBase<S>, S> extends StatefulWidget {
  const NewBlocBuilder({
    Key? key,
    required this.builder,
  }) : super(key: key);
 
  final Function(BuildContext context, S state) builder;
 
  @override
  _NewBlocBuilderState createState() => _NewBlocBuilderState<B, S>();
}
 
class _NewBlocBuilderState<B extends BlocBase<S>, S> extends State<EasyBlocBuilder<B, S>> {
  late B _bloc;
  late S _state;
  StreamSubscription<S>? _listen;
 
  @override
  void initState() {
    _bloc = BlocProvider.of<B>(context);
    _state = _bloc.state;
 
    //数据改变刷新Widget
    _listen = _bloc.stream.listen((event) {
      setState(() {});
    });
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return widget.builder(context, _state);
  }
 
  @override
  void dispose() {
    _listen?.cancel();
    super.dispose();
  }
}

总结

经过上面的分析，我们大致知道了整个BLoC的运行机制

BlocProvider:

• 存储外部传入的XXXBloc实例对象；
• 添加.of<T>方法，可以在BlocProvider及其子节点获取BlocProvider中存储的XXXBloc实例对象；
• Stream流的回收；

BlocBase:

• 存储外部传入的state实例对象；
• 初始化Stream相关的一系列对象；
• 封装了Stream流回收的实现；

BlocBuilder:

• 基于StatefulWidget实现；
• 通过BlocProvider获取其内部存储的XXXBloc实例对象，在通过listener方法监听其内部state实例对象的值的改变；
• 数据改变后，通过setState()方法来实现BlocBuilder内部包裹的控件的刷新；

造轮子：自定义状态管理框架

框架整体思路参考BLoC，进行一定程度的简化；

logic层（SMLogic）：定义基类，处理Stream流的一些列操作；

import 'dart:async';
 
class SMLogic<T> {
  SMLogic(this.state) : _controller = StreamController<T>.broadcast();
 
  final StreamController<T> _controller;
 
  late T state;
 
  Stream<T> get stream => _controller.stream;
 
  emit(T newState) {
    if (_controller.isClosed) return;
    if (state == newState) return;
    state = newState;
    _controller.add(state);
  }
 
  Future<void> close() async {
    await _controller.close();
  }
}

provider层（SMProvider）：

• 这里弃用了Provider提供的InheritiedProvider，使用Flutter标准库提供的InheritiedWidget+InheritiedElement替代实现；
• 自定义.of<T>方法从父控件中获取对应的Element（SMLogic实例）；
• 调用SMLogic实例关闭Stream的操作；

import 'package:flutter/cupertino.dart';
import 'package:state_management_demo/SMTool/state_management_logic.dart';
 
class SMProvider<T extends SMLogic> extends InheritedWidget {
  SMProvider({
    Key? key,
    Widget? child,
    required this.create,
  }) : super(key: key, child: child ?? Container());
 
  T Function(BuildContext context) create;
 
  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return false;
  }
 
  @override
  InheritedElement createElement() {
    return _SMInheritedElement(this);
  }
 
  static T of<T extends SMLogic>(BuildContext context) {
    var ie = context.getElementForInheritedWidgetOfExactType<SMProvider<T>>()
        as _SMInheritedElement<T>?;
    if (ie == null) {
      throw 'not found';
    }
    return ie.value;
  }
}
 
class _SMInheritedElement<T extends SMLogic> extends InheritedElement {
  _SMInheritedElement(SMProvider<T> widget) : super(widget);
 
  bool _firstBuild = true;
 
  late T _value;
  T get value => _value;
 
  @override
  void performRebuild() {
    if (_firstBuild) {
      _firstBuild = false;
      _value = (widget as SMProvider<T>).create(this);
    }
    super.performRebuild();
  }
 
  @override
  void unmount() {
    _value.close();
    super.unmount();
  }
}

builder层：基于StatefulWidget；

import 'dart:async';
 
import 'package:flutter/cupertino.dart';
import 'package:state_management_demo/SMTool/state_management_logic.dart';
import 'package:state_management_demo/SMTool/state_management_provider.dart';
 
class SMBuilder<L extends SMLogic<S>, S> extends StatefulWidget {
  SMBuilder({
    Key? key,
    required this.builder,
  }) : super(key: key);
 
  Function(BuildContext context, S state) builder;
 
  @override
  State<StatefulWidget> createState() {
    return _SMBuilderState<L, S>();
  }
}
 
class _SMBuilderState<L extends SMLogic<S>, S> extends State<SMBuilder<L, S>> {
  late L _logic;
  late S _state;
 
  StreamSubscription<S>? _subscription;
 
  @override
  void initState() {
    _logic = SMProvider.of<L>(context);
    _state = _logic.state;
    _subscription = _logic.stream.listen((state) {
      setState(() {
 
      });
    });
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return widget.builder(context, _state);
  }
 
  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }
}

通过以上方式便可实现BLoC的基础功能；

框架的使用

实现一个点击按钮增加的计数的功能；

state层：

class SMDemoState {
  late int count;

  SMDemoState init() {
    return SMDemoState()..count = 0;
  }

  SMDemoState clone() {
    return SMDemoState()..count = count;
  }
}

logic层：

import 'package:state_management_demo/SMTool/state_management_logic.dart';
import 'package:state_management_demo/sm_demo_state.dart';

class SMDemoLogic extends SMLogic<SMDemoState> {
  SMDemoLogic() : super(SMDemoState().init());

  void addCount() {
    emit(state.clone()..count = ++state.count);
  }
}

view层：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:state_management_demo/SMTool/state_management_builder.dart';
import 'package:state_management_demo/SMTool/state_management_provider.dart';
import 'package:state_management_demo/sm_demo_logic.dart';
import 'package:state_management_demo/sm_demo_state.dart';

class SMDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SMProvider(
      create: (BuildContext context) => SMDemoLogic(),
      child: Builder(
        builder: (context) => _buildPage(context),
      ),
    );
  }

  Widget _buildPage(BuildContext context) {
    final logic = SMProvider.of<SMDemoLogic>(context);
    return Scaffold(
      appBar: AppBar(title: Text('自定义状态管理框架-SMTool范例'),),
      body: Center(
        child: SMBuilder<SMDemoLogic, SMDemoState>(
          builder: (context, state) {
            return Text(
              'You have pushed the button this many times: ${logic.state.count}',
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.addCount(),
        child: Icon(Icons.add),
      ),
    );
  }
}

demo源码地址