平安喜樂

前置知識

想要弄懂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源碼地址