Flutter EventBus事件总线的应用详解

目录
  • 前言
  • EventBus的简介
  • EventBus的实际应用
  • 总结

前言

flutter项目中，有许多可以实现跨组件通讯的方案，其中包括InheritedWidget，Notification，EventBus等。本文主要探讨的是EventBus事件总线实现跨组件通讯的方法。

EventBus的简介

EventBus的核心是基于Streams。它允许侦听器订阅事件并允许发布者触发事件，使得不同组件的数据不需要一层层传递，可以直接通过EventBus实现跨组件通讯。

EventBus最主要是通过触发事件和监听事件两项操作来实现不同页面的跨层访问。触发事件是通过fire(event)方法进行，监听事件则是通过on<T>()方法进行的，其中泛型可以传入指定类型，事件总线将进行针对性监听，如果泛型传值为空，则默认监听所有类型的事件：

void fire(event) {
  streamController.add(event);
}

Stream<T> on<T>() {
  if (T == dynamic) {
    return streamController.stream as Stream<T>;
  } else {
    return streamController.stream.where((event) => event is T).cast<T>();
  }
}

EventBus的实际应用

1、在pubspec.yaml文件中引用eventBus事件总线依赖；

2、创建一个全局的EventBus实例；

3、使用fire(event)方法在事件总线上触发一个新事件（触发事件）；

4、为事件总线注册一个监听器（监听事件）；

5、取消EventBus事件订阅，防止内存泄漏。

// 1、在pubspec.yaml文件中引用eventBus事件总线依赖；
dependencies:
    event_bus: ^2.0.0

// 2、创建一个全局的EventBus实例；
EventBus myEventBus = EventBus();

// 3、使用fire(event)方法在事件总线上触发一个新事件（触发事件）；
Center(
  child: ElevatedButton(
    onPressed: () {
      myEventBus.fire('通过EventBus触发事件');
    },
    child: Text('触发事件'),
  ),
)

var getData;
@override
void initState() {
  // TODO: implement initState
  super.initState();
  // 4、为事件总线注册一个监听器（监听事件）；
  getData = myEventBus.on().listen((event) {
    print(event);
  });
}
@override
void dispose() {
  // TODO: implement dispose
  super.dispose();
  // 5、取消EventBus事件订阅，防止内存泄漏。
  getData.cancel();
}

总结

EventBus遵循的是发布/订阅模式，能够通过事件的触发和监听操作，有效实现跨组件通讯的功能。

以上就是Flutter EventBus事件总线的应用详解的详细内容，更多关于Flutter EventBus事件总线的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter 语法进阶抽象类和接口本质区别详解

    Flutter 语法进阶抽象类和接口本质区别详解

    目录 1. 接口存在的意义? 2. 继承 VS 实现 3. Dart 中接口与实现的特殊性 4.Dart 中抽象类作为接口的小细节 1. 接口存在的意义? 在 Dart 中 接口 定义并没有对应的关键字.可能有些人觉得 Dart 中弱化了 接口 的概念,其实不然.我们一般对接口的理解是:接口是更高级别的抽象,接口中的方法都是 抽象方法 ,没有方法体.通过接口的定义,我们可以通过定义接口来声明功能,通过实现接口来确保某类拥有这些功能. 不过你有没有仔细想过,为什么接口会存在,引入接口的概念是为了解

  • Flutter pageview切换指示器的实现代码

    Flutter pageview切换指示器的实现代码

    PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 在 PageView 里有三个构造函数: PageView - 创建一个可滚动列表. PageView.builder - 创建一个滚动列表,指定数量. PageView.custom - 创建一个可滚动的列表,自定义子项. 效果 代码 // Copyright 2017, the Flutter project authors. Please see the AUTHORS file // for de

  • Flutter开发Widgets 之 PageView使用示例

    Flutter开发Widgets 之 PageView使用示例

    目录 构造方法以及参数: 基本用法 无限滚动 实现指示器 切换动画 总结: 构造方法以及参数: PageView可用于Widget的整屏滑动切换,如当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,如APP第一次安装时的引导页面,也可用于开发轮播图功能. PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 Pag

  • flutter PageView实现左右滑动切换视图

    flutter PageView实现左右滑动切换视图

    本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下 import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/

  • Flutter构建自定义Widgets的全过程记录

    Flutter构建自定义Widgets的全过程记录

    目录 一.组合widget实现 二.通过自定义CustomPainter实现widgets 三.饼状图piechart.dart代码展示 四.实际效果图,eg: 附:Flutter中父widget调用子widget的方法 总结 一.组合widget实现 1.android和flutter自定义控件对比 Android中,一般会继承View或已经存在的某个控件,然后覆盖draw方法来实现自定义View.在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承.下

  • Flutter EventBus事件总线的应用详解

    目录 前言 EventBus的简介 EventBus的实际应用 总结 前言 flutter项目中,有许多可以实现跨组件通讯的方案,其中包括InheritedWidget,Notification,EventBus等.本文主要探讨的是EventBus事件总线实现跨组件通讯的方法. EventBus的简介 EventBus的核心是基于Streams.它允许侦听器订阅事件并允许发布者触发事件,使得不同组件的数据不需要一层层传递,可以直接通过EventBus实现跨组件通讯. EventBus最主要是通过

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

    目录 前言 使用方式 Bloc 新形态用法 事件队列的阻塞属性? 前言 最近,小轰参与了公司 flutter 项目关于 Dart 2.0 的空安全升级工作.我们升级了所有依赖的三方库,其中就包括有 Bloc 库.作为一款使用率颇高的状态管理框架, Bloc 在版本迭代中进行了少许结构和细节的优化,下面是小轰对于 Bloc 新版本的使用总结. 使用方式 小轰使用的 Bloc 版本如下 flutter_bloc: ^7.3.1 通过最简单的例子来学习新知识 创建一个包含 加 减 操作的页面,使用 b

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

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

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

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

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • IOS开发之手势响应事件优先级的实例详解

    IOS开发之手势响应事件优先级的实例详解 交互响应事件都是通过手势的操作完成的,如点击.或双击.或长按,这些交互都是在视图中完成的,但是不同的视图可能会有不同的交互,有时候就会出现交互响应事件冲突的情况.这时候就需要处理事件优先级,以便达到想要的效果. 示例场景:一个自定义模式视图view中,有一个列表视图table,同时有一个确定的按钮视图button:在view中有一个单击事件UITapGestureRecognizer,在table中点击每个cell也会有点击事件,同样的button中有个

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • 基于SSIS 事件的向上传递(详解)

    在SSIS中,Package是Task组件的有序组合,具有层次结构,Package处于层次结构的顶层(Root Level),对于父子包结构,父包(Parent Package)通过Execute Package Task组件调用其他Package,被调用的Package是子包,父包是子包的上层级别,最顶层的Package,处于层次结构的顶层,叫做根包(Root Package):容器(Container)组件包含其他Task组件,容器是被包含的Task组件的父级别(Parent Level):

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

随机推荐