详解Flutter中数据传递的方式

在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数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论