详解Flutter中数据传递的方式

目录
  • 1、构造方法传递
  • 2、InheritedWidget
  • 3、Notification
  • 4、Stream & event_bus

在Flutter中，常见的数据传递一共有以下几种：

1、构造方法传递

Flutter的构造方法具备着dart语言的特点，参数具备可选状态，通过构造方法传递数据，可以很方便的将任意数据进行传递，平时开发中，A跳转B页面最常用的方法就是通过构造方法进行传递。比如我们最常见的Key就是通过构造一级一级向下传递的。

优点： 相邻页面之间传递数据非常方便，你不需要进行任何额外的操作。

缺点： 当页面层级过多以及类过多时，需一级一级传递，写起来非常麻烦，代码耦合性高。

2、InheritedWidget

为了解决构造函数一级一级乡下传递的的缺点，Flutter派生出了功能性组件InheritedWidget，通过它可以实现顶级widget的数据共享，也就是说无需一级一级向下传递，即可获取数据，比如A页面有一个数据，需要在C页面使用，那么就可以不经过B页面获取，前提ABC三个页面是属于一个Widget中的，常见的 TabView布局顶层数据共享，适合复杂页面顶层向下传递数据，使用也很简单。

示例代码：

/// 数据共享
class TestData extends InheritedWidget {
  final Widget child;
  final String data; // 共享数据

  // 构造
  const TestData({
    Key? key,
    required this.child,
    required this.data,
  }) : super(key: key, child: child);

/// 定义一个静态方法 获取数据
static String of(BuildContext context) {
// return context.dependOnInheritedWidgetOfExactType<TestDataestData>()?.data??"数据有误";
return (context.getElementForInheritedWidgetOfExactType<TestData>()?.widget as TestData).data ;
}
  @override
  bool updateShouldNotify(covariant TestData oldWidget) {
    return child != oldWidget.child;
  }
}

然后在A页面的根布局套上TestData，在C页面通过of方法即可获取数据。

两种更新数据方法：

dependOnInheritedWidgetOfExactType: 子组件更新didChangeDependencies();

getElementForInheritedWidgetOfExactType: 不更新。

需要注意的点： 这种传递方式是树状结构从上而下进行传递，所共享数据的页面必须在顶层的build方法中，并且没有延迟加载，比如这个页面为动态加载，那么在C页面中的initState获取数据就会报错，原因就是首次构建时，没有加载子页面导致，可在build方法中获取，或者延时获取。

优点： 自上而下，无需一级一级传递，传递方便。

缺点： 不能跨组件传递。

应用场景： 系统中比如我们常见的MediaQuery设备信息和Theme应用主题就是通过这种方式在来进行统一数据共享的。

3、Notification

Notification是FLutter中的一种通知机制，和 InheritedWidget相反，他可以自下而上通知父组件更新数据，

定义传递数据类：

class TestDataN extends Notification{
  final String data;
  TestDataN(this.data);
}

子组件通知调用dispacth方法通知父组件。

TestDataN("data").dispatch(context);

在父组件进行监听:

NotificationListener(
    onNotification: (data){
      print("data$data");
  return true;
},child: child);

应用场景： 比如我们的ListView滚动监听、就是通过Notification实现的。

4、Stream & event_bus

以上的2、3数据传递方式都是基于同一个widget树进行传递的，跨组件通信我们可以使用Stream事件流进行传递，通过订阅者模式监听数据，可以在任意组件中进行数据传递，event_bus插件就是使用这种方式来进行数据传递的。

eventBus示例代码:

// 创建公用对象
EventBus eventBus = EventBus();
// 监听数据
eventBus.on().listen((event) {

});
// 发送
eventBus.fire(event);

使用完毕在注册接收数据页面记得销毁:eventBus.destroy();

优点： 可以跨组件通信。

到此这篇关于详解Flutter中数据传递的方式的文章就介绍到这了,更多相关Flutter数据传递内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Flutter自定义底部导航栏的方法

    Flutter自定义底部导航栏的方法

    本文实例为大家分享了Flutter自定义底部导航栏的具体代码,供大家参考,具体内容如下 文件结构: main.dart import 'package:flutter/material.dart'; import 'pages/tabs.dart';   void main() => runApp(new MyApp());   class MyApp extends StatelessWidget {   @override   Widget build(BuildContext contex

  • Flutter的键值存储数据库使用示例详解

    目录 Flutter 键值存储数据库 unqlite unqlite_flutter 快速上手 简单键值对存储 JSON 为什么你应该使用unqlite_flutter? Flutter 键值存储数据库 键值存储是开发中十分常见的需求,在Flutter开发中,一般使用 shared_preferences 插件来实现.shared_preferences 本质上就是将键值对保存到一个XML文件中进行持久化. 而shared_preferences 实际上存在一定缺陷,譬如其性能较差,不适合处理大

  • Flutter定义tabbar底部导航路由跳转的方法

    Flutter定义tabbar底部导航路由跳转的方法

    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示 Home.dart 另外两个页面相同 import 'package:flutter/material.dart'; class HomePage extends StatefulWidget {   HomePage({Key

  • Flutter实现不同缩放动画效果详解

    Flutter实现不同缩放动画效果详解

    目录 需求背景 可缩放组件介绍 ScaleTransition SizeTransition AnimatedSize AnimatedBuilder 小结 需求背景 组件缩放可以向着一个方向进行缩放,放大列表中某一个Cell期望它是向后进行放大而非组件中心点开始缩放.具体效果如下图所示: 可缩放组件介绍 ScaleTransition ScaleTransition具体实现如下代码,设置AnimationController控制器若需要增加数值操作可以再增加Animate再调用forward方

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

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

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

  • Flutter之可滚动组件子项缓存 KeepAlive详解

    Flutter之可滚动组件子项缓存 KeepAlive详解

    本文为大家分析了Flutter之可滚动组件子项缓存 KeepAlive,供大家参考,具体内容如下 首先回想一下,在介绍 ListView 时,有一个addAutomaticKeepAlives 属性我们并没有介绍,如果addAutomaticKeepAlives 为 true,则 ListView 会为每一个列表项添加一个 AutomaticKeepAlive 父组件.虽然 PageView 的默认构造函数和 PageView.builder 构造函数中没有该参数,但它们最终都会生成一个 Sli

  • 详解Flutter中数据传递的方式

    目录 1.构造方法传递 2.InheritedWidget 3.Notification 4.Stream & event_bus 在Flutter中,常见的数据传递一共有以下几种: 1.构造方法传递 Flutter的构造方法具备着dart语言的特点,参数具备可选状态,通过构造方法传递数据,可以很方便的将任意数据进行传递,平时开发中,A跳转B页面最常用的方法就是通过构造方法进行传递.比如我们最常见的Key就是通过构造一级一级向下传递的. 优点: 相邻页面之间传递数据非常方便,你不需要进行任何额外

  • 详解Flutter中的数据传递

    详解Flutter中的数据传递

    目录 Flutter 中的数据传递 InheritedWidget EventBus 总结 Flutter 中的数据传递 在开发中,数据从一个页面传递到另一个页面事很常用的,在Android 开发中,通常是通过把数据放到 intent 中传递过去.在 Flutter 中,数据是如何传递的呢? 在Flutter 中一切都是Widget,所以数据的传递就成了数据才Widget 中的传递.在之前的学习中,数据从一个Widget 传递到 子 Widget 是通过构造函数,一层一层的往里面传,要是 wid

  • 详解Flutter中Dart集合使用教程

    目录 前言 优先使用集合的特有语法 不要使用.length 属性判断集合是不是为空 避免使用 forEach 迭代元素 不要使用 List.from(),除非你想要更改结果的类型 使用 whereType 过滤类型 避免使用 cast() 做强制转换 总结 前言 集合是应用程序中最为常见的数据结构,Dart 一共支持如下四种集合,其中核心的 List, Map 和 Set 在基础框架中,而 Queue 在 dart:collection 库定义. 列表:也就是 List类,可动态增长的数组: k

  • 详解Flutter中视频播放器插件的使用教程

    详解Flutter中视频播放器插件的使用教程

    目录 创建一个新的视频播放器 添加播放和暂停按钮 创建一个快进 添加一个视频进度指示器 应用视频的字幕 结论 您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序.电影应用程序和体育相关的应用程序.您是否想知道如何将视频内容添加到您的下一个Flutter应用程序中? 从头开始实现视频功能将是一项繁重的任务.但有几个插件可以让开发者的生活变得轻松.视频播放器插件是可用于 Flutter 的最佳插件之一,可满足这一要求. 在这篇文章中,您将学习如何应用视频播放器插件以及控制视频播放器

  • 详解Flutter中网络框架dio的二次封装

    详解Flutter中网络框架dio的二次封装

    其实dio框架已经封装的很好了,但是在实战项目中,为了项目可以统一管理,还是需要对dio框架进行二次封装. 整体思路:一般情况下,后台返回的数据我们可以分为两部分 1.状态数据 2.渲染数据 状态数据就是接口有没有正常返回数据相关的数据,这部分数据跟业务无关,我们可以封装起来统一管理,渲染数据就是我们渲染页面所需要的数据,这块的数据需要我们自己处理. 接下来我们就主要处理渲染数据这块的内容,我定义了两个函数,渲染数据可能为一个对象或者一个数组,我做了分别处理,定义两个函数来接受渲染数据. //

  • 一文详解MySQL中数据表的外连接

    一文详解MySQL中数据表的外连接

    目录 为什么要使用外连接 外连接简介 左连接与右连接 外连接练习① 外连接练习② 该章节的内容为多表连接查询的外连接,因为 MySQL 是关系型数据库,数据是拆分重组在多个数据表里面的.所以我们势必要从多个数据表中提取数据,通过 SQL 语句的内连接与外连接就能够实现多表查询了.这部分内容是需要我们重点学习的,学习的过程中会穿插多种的案例来强化对表连接的语法的运用. 为什么要使用外连接 在解释为什么使用 “外连接” 之前,先来看一个记录.(如下:) 针对表中的张三没有所属的部门编号,我们暂且将他

  • 详解flutter中常用的container layout实例

    详解flutter中常用的container layout实例

    目录 简介 Container的使用 旋转Container Container中的BoxConstraints 总结 简介 在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column. 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件.今天我们会介绍一个功能强大的layout:Container layout. Container的使用 Container是一

  • 详解Flutter中StatefulBuilder组件的使用

    详解Flutter中StatefulBuilder组件的使用

    目录 例子 预览 编码 结论 本文是关于 Flutter 中的 StatefulBuilder 小部件.我将介绍小部件的基础知识,然后检查一个在实际中使用它的完整示例..StatefulBuilder 小部件可以在这些区域的状态发生变化时仅重建某些小区域而无需付出太多努力.这提高了应用程序的性能. StatefulBuilder({ Key? key, required StatefulWidgetBuilder builder r}) builder 函数有两个参数:context和一个用于在

  • 详解vue.js数据传递以及数据分发slot

    详解vue.js数据传递以及数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111"变成"我是子组件的数据" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级获取子级的数据

  • 详解Django3中直接添加Websockets方式

    现在Django 3.0附带了对ASGI的支持,将Websockets添加到Django应用中不需要任何额外的依赖关系. 在本文中,您将学习如何通过扩展默认的ASGI应用程序来使用Django处理Websocket. 我们将介绍如何在示例ASGI应用程序中处理Websocket连接,发送和接收数据以及实现业务逻辑. 入门 首先,您需要在计算机上安装Python> = 3.6. Django 3.0仅与Python 3.6及更高版本兼容,因为它使用了async和await关键字. 完成Python

随机推荐