Dart 状态管理 Bloc使用

Bloc官网

Bloc Github

Bloc Pub地址

• 依赖

dependencies:
  bloc: ^2.0.0

• 下载包

pub get

• 导入

import 'package:bloc/bloc.dart';

Events

Events 是 Bloc 的输入，通常是为了响应用户交互或生命周期事件而添加它们。当用户点击按钮时，发送一个事件。

enum CounterEvent { increment, decrement }

States

States 是 Bloc 的输出, 代表应用程序状态的一部分。可以通知UI组件状态，并根据当前状态重绘其自身的某些部分。

Transitions

Transitions 是从一种状态到另一种状态的，过渡由当前状态，事件和下一个状态组成。

{
  "currentState": 0,
  "event": "CounterEvent.increment",
  "nextState": 1
}

Streams

Blocs

Bloc(业务逻辑组件) 是将Stream输入的Events 转换Stream为输出的组件States。

• 每个Bloc必须继承自Bloc基类。
• 每个Bloc必须定义一个初始状态, 该状态是接收任何事件之前的状态。
• 每个Bloc必须实现mapEventToState函数, 该函数将传入event作为参数，并且必须返回Stream的新states。我们可以使用state属性随时访问当前的块状态。

import 'package:bloc/bloc.dart';

/// 定义事件
enum CounterEvent { increment, decrement }

/// 定义Bloc, 必须继承Bloc
class CounterBloc extends Bloc<CounterEvent, int> {
  // 必须实现初始化状态
  @override
  int get initialState => 0;

  // 必须实现mapEventToState方法
  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    // 根据不同的事件做处理
    switch (event) {
      case CounterEvent.increment: // 添加事件
        yield state + 1;
        break;
      case CounterEvent.decrement: // 减少事件
        yield state - 1;
        break;
      default:
        throw Exception('unhandled event: $event');
    }
  }

  // 记录转换过程
  @override
  void onTransition(Transition<CounterEvent, int> transition) {
    print(transition);
  }

  // 异常
  @override
  void onError(Object error, StackTrace stacktrace) {
    print('$error');
  }
}

void main(List<String> args) {
  // 创建Bloc
  var bloc = CounterBloc();

  // 添加事件
  for (var i = 0; i < 3; i++) {
    bloc.add(CounterEvent.increment);
  }

  // 添加null
  bloc.add(null);

  // 添加事件
  for (var i = 0; i < 3; i++) {
    bloc.add(CounterEvent.decrement);
  }
}

运行结果.png

注意: Bloc 会忽略重复的状态, 即数据相同则不更新UI. 默认情况下, 将按照事件添加的顺序处理事件，并将所有新添加的事件排队。一旦mapEventToState完成执行，就认为事件已完全处理。

onTransition() 方法可记录与分析日志, onError()方法则查看异常日志。

BlocDelegate

BlocSupervisor是一个单例，负责所有Bloc 并将职责委托给BlocDelegate.

/// Bloc 代理
class SimpleBlocDelegate extends BlocDelegate {
  @override
  void onEvent(Bloc bloc, Object event) {
    super.onEvent(bloc, event);
    print('SimpleBlocDelegate: onEvent');
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print('SimpleBlocDelegate: onTransition');
  }

  @override
  void onError(Bloc bloc, Object error, StackTrace stacktrace) {
    super.onError(bloc, error, stacktrace);
    print('SimpleBlocDelegate: onError');
  }
}

void main(List<String> args) {
  // 单例对象
  BlocSupervisor.delegate = SimpleBlocDelegate();
  // 创建Bloc
  var bloc = CounterBloc();

  // 添加事件
  for (var i = 0; i < 3; i++) {
    bloc.add(CounterEvent.increment);
  }

  // 添加null
  bloc.add(null);

  // 添加事件
  for (var i = 0; i < 3; i++) {
    bloc.add(CounterEvent.decrement);
  }
}

打印结果.png