flutter Bloc 更新后事件同步与异步详解

目录
  • 前言
  • 使用方式
  • Bloc 新形态用法
  • 事件队列的阻塞属性?

前言

最近,小轰参与了公司 flutter 项目关于 Dart 2.0 的空安全升级工作。我们升级了所有依赖的三方库,其中就包括有 Bloc 库。作为一款使用率颇高的状态管理框架, Bloc 在版本迭代中进行了少许结构和细节的优化,下面是小轰对于 Bloc 新版本的使用总结。

使用方式

小轰使用的 Bloc 版本如下

flutter_bloc: ^7.3.1

通过最简单的例子来学习新知识

  • 创建一个包含 操作的页面,使用 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: [
            //显示当前的数字结果
            Text(state.num.toString()),
            TextButton(
                onPressed: () {
                  //进行自增操作
                  _bloc.add(IncreaseEvent());
                },
                child: Text('add')),
            TextButton(
                onPressed: () {
                  //进行自减操作
                  _bloc.add(ReduceEvent());
                },
                child: Text('reduce')),
          ],
        );
      },
    );
  }
}

Blocstateevent 模型定义如下

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{}

创建 Bloc ,重写 mapEventToState 接收事件流转状态流

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 完全一致,在经历高版本迭代后,Bloc 到底做了哪些优化呢?

Bloc 新形态用法

小轰在源码里看到,重写 mapEventToState 的使用方式已经被弃用了,会在将来的某个版本中彻底删除该 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 来进行事件注册,我们将上面demo中的 bloc 进行写法改造:

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 同时支持 onmapEventToState 两种写法,那么这两种写法有实际区别吗?

小轰在使用老版本(空安全之前)bloc 时总结过一篇文章 聊聊 Bloc event 的队列属性。

blocmapEventToState 方法中,event 队列是一个阻塞性队列,先进先出,只有当上一个事件消费完毕后,才会响应队列中的下一个事件。

如上demo( mapEventToState 方式): 自增事件中模拟耗时了10s,当依次点击 自增自减 按钮后,由于事件队列的阻塞特性,自增事件消费10秒后,自减事件才会被 mapEventToState 响应。

那么,这个特性在 bloc 迭代新版本后还存在吗?在最新版本的bloc中,小轰通过demo测试得出结论:

  • 当使用 mapEventToState 方式进行事件捕获时,event 队列 保持 阻塞 特性。
  • 而使用 on 方式进行注册监听时,event 队列 默认是异步非阻塞的,是互不干扰的。如果把 bloc 当作事件总线来使用,小轰认为 异步非阻塞 这样的设计更为合理。

提问:如果想使用 on 的方式进行注册,还想事件队列保证顺序执行即保持阻塞特性,应该怎么办呢? 解答:使用 自定义 transformer,这样就实现了事件同步队列。

    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 更新后事件同步与异步详解的详细内容,更多关于flutter Bloc 更新事件同步异步的资料请关注我们其它相关文章!

时间: 2022-11-13

Flutter状态管理Bloc之定时器示例

本文实例为大家分享了Flutter状态管理Bloc之定时器的具体代码,供大家参考,具体内容如下 1. 依赖 dependencies:   flutter_bloc: ^2.1.1   equatable: ^1.0.1   wave: ^0.0.8 2. Ticker Ticker 用于产生定时器的数据流. /// 定时器数据源 class Ticker {      /// 定时器数据源   /// @param ticks 时间   Stream<int> tick({int ticks

Flutter之自定义Dialog实现版本更新弹窗功能的实现

功能点: 1.更新弹窗UI 2.强更与非强更且别控制 3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消失) 4.点击弹窗外透明区域时,弹窗不消失 先看下效果图: Dialog实现代码: import 'package:flutter/material.dart'; import 'package:xiaopijiang/utils/assets_util.dart'; import 'package:xiaopijiang/utils/toast_util.dart'; ///create

Flutter状态管理Bloc之登录示例

本文实例为大家分享了Flutter状态管理Bloc之登录的具体代码,供大家参考,具体内容如下 1. 依赖 dependencies:   flutter_bloc: ^2.1.1   equatable: ^1.0.1 2. UserRepository 用于管理用户数据 提供认证方法,删除Token,保存Token,是否包含Token四个方法. import 'package:flutter/material.dart';   /// 用户数据仓库 class UserRepository {

Flutter如何轻松实现动态更新ListView浅析

目录 前言 数据集 触发器 展示视图 完整代码 总结 前言 在 App 开发过程中,ListView 是 比较很常见的控件,用来处理 列表类的数据展示.当然 Flutter 也是支持的,由于 Flutter 是归属于声明式 UI 编程,其处理起来要更加的简单与便捷. 本文将通过一个极简单的例子来说明一下 如何 实现动态更新数据. 在贴代码之前,先介绍一些概念和内容 数据集 final _names = ['Andrew', 'Bob', 'Charles']; int _counter = 0;

flutter实现更新弹窗内容例子(亲测有效)

什么是Flutter Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作,并且Flutter是完全免费的,开源的. 总结来说: Flutter是一款移动应用程序SDK,包含框架.widget和工具,为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式. Flutter的优势 快速开发 毫秒级的热重载,修改后,您的应用界面会立即更新.使用丰富的.完全可定制的widg

Flutter状态管理Bloc使用示例详解

目录 前言 两种使用模式 Cubit模式 最后 前言 目前Flutter三大主流状态管理框架分别是provider.flutter_bloc.getx,三大状态管理框架各有优劣,本篇文章将介绍其中的flutter_bloc框架的使用,他是bloc设计思想模式在flutter上的实现,bloc全程全称 business logic ,业务逻辑的意思,核心思想就是最大程度的将页面ui与数据逻辑的解耦,使我们的项目可读性.可维护性.健壮性增强. 两种使用模式 首先第一步引入插件: flutter_bl

Flutter下载更新App的方法示例

1. 说明 iOS 和Android 更新是完全不一样的. iOS 只能跳转到 AppStore,比较好实现 Android则需要下载apk包,由于Android机型较多,这里我们用 dart 连接第三方(这里)的原生 android 下载库. 更新界面和下载更新分开处理的. iOS 没得下载进度这一说,Android 则有. 2. 代码 2.1 iOS 直接采用url_launcher就可以了 if (Platform.isIOS) { final url = "https://itunes.

用Flutter开发自定义Plugin的方法示例

当你在开发flutter应用的时候,有时会需要调用native的api,往往遇到flutter并没有相应的package, 这时候flutter plugin就开始发挥作用了,这篇文章将会讲解开发一个简单flutter plugin的步骤和方法,好了,让我们开始动手吧. 1.在Android Studio 中创建一个Flutter Plugin 项目,如下图 上图中你能看到项目描述中写到,如果需要暴露Andorid或iOS的API给开发者时,选择"Plugin"项目类型. 这个项目我们

PHP实现将多个文件压缩成zip格式并下载到本地的方法示例

本文实例讲述了PHP实现将多个文件压缩成zip格式并下载到本地的方法.分享给大家供大家参考,具体如下: 废话不多说,直接上代码 //这里需要注意该目录是否存在,并且有创建的权限 $zipname = 'path/test.zip' //这是要打包的文件地址数组 $files = array("mypath/test1.txt","mypath/test2.pdf"); $zip = new ZipArchive(); $res = $zip->open($zi

android实现通知栏下载更新app示例

1.设计思路,使用VersionCode定义为版本升级参数.android为我们定义版本提供了2个属性: 复制代码 代码如下: <manifest package="com.cnblogs.tianxia.subway"android:versionCode="1" <!--Integer类型,系统不显示给用户-->android:versionName="1.0"<!--String类型,系统显示用户-->>

Flutter实现网络请求的方法示例

Flutter网络请求使用的是Dio.Dio是一个强大易用的dart http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载....... Flutter json数据解析是使用了json_serializable package包.它是一个自动化源代码生成器,可以为我们生成JSON序列化模板.由于序列化代码不再由我们手写和维护,我们将运行时产生JSON序列化异常的风险降至最低. Flutter网络请求数据并且展示效果图: 数据接口 数据

node.js读取Excel数据(下载图片)的方法示例

前言 因为组织观影活动需要统计报名和收集影评,选择微信小程序"报名工具",管理员下载数据发现影评只是一个图片的URL链接,需要自己手动下载,哪里能难倒程序员? 1. 下载的Excel数据表: 2. 代码: const xlsx = require('xlsx'); const mkdirp = require('mkdirp'); const request = require('request'); const fs = require('fs'); const workbook =

Android编程实现通知栏进度条效果的方法示例

本文实例讲述了Android编程实现通知栏进度条效果的方法.分享给大家供大家参考,具体如下: /** * 通知管理工具类 * * @description: * @author ldm * @date 2016-5-3 上午9:39:56 */ public class NotificationUtil { private Context mContext; // NotificationManager : 是状态栏通知的管理类,负责发通知.清楚通知等. private Notification

Flutter 实现整个App变为灰色的方法示例

在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下: @override Widget build(BuildContext context) { return ColorFiltered( colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color), child: Scaffold( appBar: _appBar, body: IndexedStack( index:

laravel实现批量更新多条记录的方法示例

前言 相信熟悉laravel的童鞋都知道,laravel有批量一次性插入多条记录,却没有一次性按条件更新多条记录. 是否羡慕thinkphp的saveAll,是否羡慕ci的update_batch,但如此优雅的laravel怎么就没有类似的批量更新的方法呢? 高手在民间 Google了一下,发现stackoverflow( https://stackoverflow.com/questions/26133977/laravel-bulk-update )上已经有人写好了,但是并不能防止sql注入

Android 在子线程中更新UI的几种方法示例

本文介绍了Android 在子线程中更新UI的几种方法示例,分享给大家,具体如下: 方式一:Handler和Message ① 实例化一个Handler并重写handlerMessage()方法 private Handler handler = newHandler() { public void handleMessage(Message msg) { // 处理消息 super.handleMessage(msg); switch (msg.what) { case 1: button1.