快捷導(dǎo)航

flutter Bloc 更新后事件同步與異步詳解

更新時間：2022年11月14日 15:36:31 作者：李小轟_Rex

這篇文章主要為大家介紹了flutter Bloc 更新后事件同步與異步詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

最近，小轟參與了公司 flutter 項目關(guān)于 Dart 2.0 的空安全升級工作。我們升級了所有依賴的三方庫，其中就包括有 Bloc 庫。作為一款使用率頗高的狀態(tài)管理框架， Bloc 在版本迭代中進(jìn)行了少許結(jié)構(gòu)和細(xì)節(jié)的優(yōu)化，下面是小轟對于 Bloc 新版本的使用總結(jié)。

使用方式

小轟使用的 Bloc 版本如下

flutter_bloc: ^7.3.1

通過最簡單的例子來學(xué)習(xí)新知識

創(chuàng)建一個包含加減操作的頁面，使用 bloc 來操作自增自減事件。

class _TestBlocPageState extends State<TestBlocPage> {
  late TestDartBloc _bloc;
  @override
  void initState() {
    super.initState();
    _bloc = TestDartBloc(TestDartState(0));
  }
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<TestDartBloc, TestDartState>(
      bloc: _bloc,
      builder: (context, state) {
        return Column(
          children: [
            //顯示當(dāng)前的數(shù)字結(jié)果
            Text(state.num.toString()),
            TextButton(
                onPressed: () {
                  //進(jìn)行自增操作
                  _bloc.add(IncreaseEvent());
                },
                child: Text('add')),
            TextButton(
                onPressed: () {
                  //進(jìn)行自減操作
                  _bloc.add(ReduceEvent());
                },
                child: Text('reduce')),
          ],
        );
      },
    );
  }
}

Bloc 中 state 和 event 模型定義如下

part of 'test_dart_bloc.dart';
/// Bloc state
class TestDartState {
  int num = 0;
  TestDartState(this.num);
}

part of 'test_dart_bloc.dart';
/// Bloc event
@immutable
abstract class TestDartEvent {}
//自增事件
class IncreaseEvent extends TestDartEvent{}
//自減事件
class ReduceEvent extends TestDartEvent{}

創(chuàng)建 Bloc ，重寫 mapEventToState 接收事件流轉(zhuǎn)狀態(tài)流

import 'dart:async';
import 'package:flutter_bloc/flutter_bloc.dart';
part 'test_dart_event.dart';
part 'test_dart_state.dart';
class TestDartBloc extends Bloc<TestDartEvent, TestDartState> {
  TestDartBloc(TestDartState state) : super(state);
  @override
  Stream<TestDartState> mapEventToState(TestDartEvent event) async* {
    if (event is IncreaseEvent) {
      await Future.delayed(Duration(seconds: 10));
      yield TestDartState(state.num + 1);
    } else if (event is ReduceEvent) {
      yield TestDartState(state.num - 1);
    }
  }
}

好了，直接運行如上代碼，我們的demo就能完整的跑起來。但，以上的寫法和低版本的 Bloc 完全一致，在經(jīng)歷高版本迭代后，Bloc 到底做了哪些優(yōu)化呢？

Bloc 新形態(tài)用法

小轟在源碼里看到，重寫 mapEventToState 的使用方式已經(jīng)被棄用了，會在將來的某個版本中徹底刪除該 API

  /// **@Deprecated - Use on<Event> instead. Will be removed in v8.0.0**
  ///
  /// Must be implemented when a class extends [Bloc].
  /// [mapEventToState] is called whenever an [event] is [add]ed
  /// and is responsible for converting that [event] into a new [state].
  /// [mapEventToState] can `yield` zero, one, or multiple states for an event.
  @Deprecated('Use on<Event> instead. Will be removed in v8.0.0')
  Stream<State> mapEventToState(Event event) async* {}

新用法推薦使用 on 來進(jìn)行事件注冊，我們將上面demo中的 bloc 進(jìn)行寫法改造：

class TestDartBloc extends Bloc<TestDartEvent, TestDartState> {
  TestDartBloc(TestDartState state) : super(state) {
    init();
  }
  void init() {
    on<IncreaseEvent>((event, emit) async {
      await Future.delayed(Duration(seconds: 10));
      emit(TestDartState(state.num + 1));
    });
    on<ReduceEvent>((event, emit) {
      state.num - 1;
      emit(state);
    });
  }
}

替換代碼后運行demo，直接成功。

事件隊列的阻塞屬性？

目前最新版本的 Bloc 同時支持 on 與 mapEventToState 兩種寫法，那么這兩種寫法有實際區(qū)別嗎？

小轟在使用老版本（空安全之前）bloc 時總結(jié)過一篇文章聊聊 Bloc event 的隊列屬性。

在 bloc 的 mapEventToState 方法中，event 隊列是一個阻塞性隊列，先進(jìn)先出，只有當(dāng)上一個事件消費完畢后，才會響應(yīng)隊列中的下一個事件。

如上demo（ mapEventToState 方式）: 自增事件中模擬耗時了10s，當(dāng)依次點擊自增和自減按鈕后，由于事件隊列的阻塞特性，自增事件消費10秒后，自減事件才會被 mapEventToState 響應(yīng)。

那么，這個特性在 bloc 迭代新版本后還存在嗎？在最新版本的bloc中，小轟通過demo測試得出結(jié)論：

當(dāng)使用 mapEventToState 方式進(jìn)行事件捕獲時，event 隊列 保持阻塞特性。
而使用 on 方式進(jìn)行注冊監(jiān)聽時，event 隊列 默認(rèn)是異步非阻塞的，是互不干擾的。如果把 bloc 當(dāng)作事件總線來使用，小轟認(rèn)為 異步非阻塞 這樣的設(shè)計更為合理。

提問：如果想使用 on 的方式進(jìn)行注冊，還想事件隊列保證順序執(zhí)行即保持阻塞特性，應(yīng)該怎么辦呢？解答：使用 自定義 transformer，這樣就實現(xiàn)了事件同步隊列。

    on<IncreaseEvent>((event, emit) async {
      await Future.delayed(Duration(seconds: 10));
      emit(TestDartState(state.num + 1));
    },
    transformer: (events, mapper) => events.asyncExpand(mapper),
);

參考鏈接： pub.dev/packages/bl…

以上就是flutter Bloc 更新后事件同步與異步詳解的詳細(xì)內(nèi)容，更多關(guān)于flutter Bloc 更新事件同步異步的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: