26 Flutter仿京东商城项目购物车之 event_bus事件广播事件监听

Love The Way You Lie 2023-08-17 15:59 38阅读 0赞

event\_bus 介绍

在前面的课程我们给大家讲过状态管理 Provider 的使用。

通俗的讲状态管理就是：当我们想在多个页面（组件/Widget）之间共享状态（数据），或

者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以

用 Flutter 中的状态管理来管理统一的状态（数据），实现不同组件直接的传值和数据共享。

event\_bus 主要是实现不同组件之间的数据传值，以及在一个组件中

执行另一个组件的方法。

event\_bus 使用 事件广播 事件监听

https://pub.dev/packages/event\_bus

1、配置安装依赖

event\_bus: ^1.1.0

2、新建一文件 EventBus.dart 配置如下代码

import 'package:event\_bus/event\_bus.dart';

//Bus 初始化

EventBus eventBus = EventBus();

class ProductContentEvent \{

String text;

ProductContentEvent(String text)\{

this.text = text;

\}

\}

3、在需要广播事件的页面引入上面的 EventBus.dart 类 然后配置如下代码湖北众猿腾网络科技有限公司

eventBus.fire(new ProductContentEvent('购物车'));

4、在需要监听广播的地方引入上面的 EventBus.dart 类 然后配置如下代码

void initState() \{

super.initState();

//监听广播

eventBus.on<ProductContentEvent>().listen((event)\{

print(event);

this.\_attrBottomSheet();

\});

\}

四、event\_bus 取消事件监听

var actionSubscription =eventBus.on<ProductContentEvent>().listen((event)\{

print(event);

this.\_attrBottomSheet();

\});

actionSubscription.cancel();

加群***452892873***下载对应26课文件，运行方法，建好项目，直接替换lib目录，在往pubspec.yaml添加上一下扩展。内含本课pdf课件

cupertino\_icons: ^0.1.2  
flutter\_swiper: ^1.1.6  
flutter\_screenutil: ^0.5.3  
dio: ^2.1.13  
shared\_preferences: ^0.5.3+4  
flutter\_inappbrowser: ^1.2.1  
provider: ^3.1.0

event\_bus: ^1.1.0

本课关键文件：

lib/pages/ProductContent/ProductContentFirst.dart

lib/pages/ProductContent.dart

lib/services/EventBus.dart

转载于:https://www.cnblogs.com/yiweiyihang/p/11489553.html

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 41 Flutter 仿京东商城项目签名验证增加收货地址、显示收货地址事件广播

加群452892873 下载对应41课文件，运行方法，建好项目，直接替换lib目录 AddressAdd.dart import 'package:dio/dio.

Dear 丶/ 2023年08月17日 15:59/ 0 赞/ 140 阅读

相关 37 Flutter仿京东商城项目结算页面布局

加群452892873 下载对应34课文件，运行方法，建好项目，直接替换lib目录 ![1057166-20190919063428882-1358141470.png][]

太过爱你忘了你带给我的痛/ 2023年08月17日 15:59/ 0 赞/ 141 阅读

相关 36 Flutter仿京东商城项目用户登录退出登录事件广播更新状态

Login.dart import 'dart:convert'; import 'package:dio/dio.dart'; im

柔情只为你懂/ 2023年08月17日 15:59/ 0 赞/ 94 阅读

相关 26 Flutter仿京东商城项目购物车之 event_bus事件广播事件监听

event\_bus 介绍在前面的课程我们给大家讲过状态管理 Provider 的使用。通俗的讲状态管理就是：当我们想在多个页面（组件/Widget）之间共享状态（数据

Love The Way You Lie/ 2023年08月17日 15:59/ 0 赞/ 39 阅读

相关 25 Flutter仿京东商城项目购物车页面布局

加群452892873 下载对应25课文件，运行方法，建好项目，直接替换lib目录，在往pubspec.yaml添加上一下扩展。 cupertino\_icons: ^0.1

朱雀/ 2023年08月17日 15:59/ 0 赞/ 166 阅读

相关 15 Flutter仿京东商城项目搜索页面布局

Search.dart import 'package:flutter/material.dart'; import 'package:flutter_jds

矫情吗；*/ 2023年08月17日 15:58/ 0 赞/ 167 阅读

相关 07-08 Flutter仿京东商城项目商品分类页面布局：Flutter仿京东商城项目商品分类页面数据渲染...

Flutter实战(交流群：452892873) 本项目是一个实战项目，根据目录建文件，并复制从第一节到最新更新的文章，可以构成完整的一个请求后台数据的项目： ![1057

比眉伴天荒/ 2023年08月17日 15:58/ 0 赞/ 200 阅读

相关 angularjs 事件广播（分发）与事件监听

使用angularjs，发现controller间的值传递，比较麻烦的，以后几篇文章会陆续说几种方法。一，angularjs `$broadcast $emit $on`

╰半夏微凉°/ 2022年07月21日 01:59/ 0 赞/ 176 阅读

相关使用EventBus事件车（事件总线）实现组件通信

//创建一个用于通信的bus模块 let bus = { install($){ //在vue的原型上添加getBus和setB

柔光的暖阳◎/ 2022年05月08日 01:24/ 0 赞/ 302 阅读

相关基于vue监听事件实现一个简单的购物车

代码如下。详情看vue菜鸟教程监听事件[https://www.runoob.com/vue2/vue-watch.html][https_www.runoob.com_vue

迈不过友情╰/ 2021年10月18日 15:46/ 0 赞/ 406 阅读