Flutter 中的数据传递

在开发中,数据从一个页面传递到另一个页面事很常用的,在Android 开发中,通常是通过把数据放到 intent 中传递过去。在 Flutter 中,数据是如何传递的呢?

在Flutter 中一切都是Widget,所以数据的传递就成了数据才Widget 中的传递。在之前的学习中,数据从一个Widget 传递到 子 Widget 是通过构造函数,一层一层的往里面传,要是 widget 的层级比较少,还没什么问题,要是层级很多,这样传递就太麻烦了。

还好Flutter 还提供了三种方案:InheritedWidget、Notification 和 EventBus来解决数据传递问题。

InheritedWidget

InheritedWidget 是 Flutter 中的一个功能型 Widget,适用于在 Widget 树中共享数据的场景。通过它,我们可以高效地将数据在 Widget 树中进行跨层传递。

下面看计数器的例子:

// 1.InheritedWidget,我们定义了一个继承自它的新类 CountContainer,里面存放需要共享的数据
//然后,我们将计数器状态 count 属性放到 CountContainer 中,并提供了一个 of 方法方便其子 Widget 在 Widget 树中找到它。
//最后,我们重写了 updateShouldNotify 方法,这个方法会在 Flutter 判断 InheritedWidget 是否需要重建,
class CountContainer extends InheritedWidget {
 static CountContainer of(BuildContext context) =>
   context.dependOnInheritedWidgetOfExactType<CountContainer>();
 final _InheritedWidgetHomeState mode;
 final Function() function;

 CountContainer(
   {Key key,
   @required this.mode,
   @required this.function,
   @required Widget child})
   : super(key: key, child: child);

 @override
 bool updateShouldNotify(covariant InheritedWidget oldWidget) {
  return this != oldWidget;
 }
}



// 2. 通过构建方法,把数据放到 InheritedWidget中
class _InheritedWidgetHomeState<InheritedWidgetHome> extends State {
 int count = 0;

 void _incrementCounter() => setState(() {
  count  ;
 });

 @override
 Widget build(BuildContext context) {
  return CountContainer(
   mode: this,
   function: _incrementCounter,
   child: CountWidget(),
  );
 }
}

// 3. 在子 widget 通过 CountContainer.of方法,获取到自定义的 InheritedWidget,并从中取得共享的数据
class CountWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  CountContainer state = CountContainer.of(context);
  return Scaffold(
   appBar: AppBar(
    title: Text("InheritedWidget demo"),
   ),
   body: Text("current count is ${state.mode.count}"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: state.function,
   ),
  );
 }
}

可以看到,InheritedWidget 的数据流动方式是从父 Widget 到子 Widget 逐层传递。

  1. 首先把通过构造函数需要共享的数据放到 InheritedWidget 中,然后提供一个静态方法,返回自身;
  2. 然后在把自定义的 InheritedWidget做为父容器,传入需要共享的数据;
  3. 最后在子widget 中,通过静态方法获取到 InheritedWidget 对象,自然就拿到里面的数据了。

EventBus

无论是 InheritedWidget 还是 Notificaiton,它们的使用场景都需要依靠 Widget 树,在使用起来就有点极限了,但Flutter 提供了一个更好的数据传递方法--EventBus,传递数据不再受到限制了。

在原生开发中,也有使用过 事件总线EventBus,Flutter 中实现跨组件通信的机制也是一样。它遵循发布 / 订阅模式,允许订阅者订阅事件,当发布者触发事件时,订阅者和发布者之间可以通过事件进行交互。发布者和订阅者之间无需有父子关系,甚至非 Widget 对象也可以发布 / 订阅。这些特点与其他平台的事件总线机制是类似的。

由于 EventBus是第三方库,所以需要引入:

event_bus: 2.0.0

从第二个页面,把数据回传到第一个页面

//建立公共的event bus
EventBus eventBus = EventBus();

class CustomEvent {
 String msg;

 CustomEvent(this.msg);
}

class _EventBusPager1State extends State {
 String message = "原来的数据";
 StreamSubscription subscription;

 @override
 void initState() {
  subscription = eventBus.on<CustomEvent>().listen((event) {
   setState(() {
    message = event.msg;
   });
  });
  super.initState();
 }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text("EventBusPager1"),
   ),
   body: Center(
    child: Text(message),
   ),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.open_in_browser),
    onPressed: () => Navigator.push(
      context, MaterialPageRoute(builder: (context) => EventBusPager2())),
   ),
  );
 }

 @override
 void dispose() {
  subscription.cancel();
  super.dispose();
 }
}

class EventBusPager2 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text("EventBusPager2"),
   ),
   body: Center(
    child: Text("EventBusPager1"),
   ),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.send),
    onPressed: () {
     eventBus.fire(CustomEvent("data from page 2"));
     Navigator.pop(context);
    },
   ),
  );
 }
}

总结

通过学习了解了 在Flutter 中如何传递数据的,大致分为四种方式:

  1. 通过属性,一层一层往下传
  2. 通过 把数据写到 InheritedWidget的子类,然后把共享的数据放到里面,并提获取自身的供静态方法,在需要的地方通过静态方法获取到 InheritedWidget对象,并获取数据,这种方式是能从父widget 传递到子widget;
  3. 通过 Notifaction 发送消息,然后再父 widget 进行监听;
  4. 通过eventBus ,通过发布 / 订阅模式,来完成数据的传递,也是开发中常用的。

以上就是详解Flutter中的数据传递的详细内容,更多关于Flutter中的数据传递的资料请关注Devmax其它相关文章!

详解Flutter中的数据传递的更多相关文章

  1. Flutter中文教程-Cookbook

    Flutter中文网的Cookbook中包含了在编写Flutter应用程序时常见问题及示例。设计基础使用主题共享颜色和字体样式Images显示来自网上的图片用占位符淡入图片使用缓存图Lists创建一个基本list创建一个水平list使用长列表创建不同类型子项的List创建一个gridList处理手势处理点击添加Material触摸水波效果实现滑动关闭导航导航到新页面并返回给新页面传值从新页面返回数据给上一个页面网络从网上获取数据进行认证请求使用WebSockets

  2. android-studio – 未配置Dart SDK

    Initializinggradle…

  3. 安卓 – 从一个扑动的应用程序拨打电话

    或者有更好的选择从我的应用程序拨打电话?

  4. android – 如何在Flutter中添加Webview?

    我知道可以将WebView添加为整页,但找不到任何示例代码.我假设你可以使用PageView作为它的基础,但不知道如何调用本机androidWebView并将其添加到PageView.谁能指出我正确的方向?

  5. android – 如何将消息从Flutter传递给Native?

    如果需要与特定的API/硬件组件进行交互,您如何将Flutter的信息传递回Android/Native代码?是否有任何事件频道可以通过其他方式发送信息或类似于回调?

  6. android – 如何在Flutter App中处理onPause / onResume?

    我是否过于复杂的事情?即使我的用例似乎不需要它,我仍然想知道:如何自己处理onPause/onResume事件?

  7. android – 如何使用Flutter构建Augment Reality应用程序?

    我对Android开发有一些基础知识.最近听说过Flutter并且非常有兴趣研究它.我想知道是否有可能使用颤振构建增强现实应用程序以及要实现此目的的方法?请帮忙.解决方法截至目前,颤振不支持3D.Flutter现在专注于2D,团队长期计划为颤振提供优化的3Dapi.你读了常见问题here.

  8. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. NT IIS下用ODBC连接数据库

    $connection=intodbc_connect建立数据库连接,$query_string="查询记录的条件"如:$query_string="select*fromtable"用$cur=intodbc_exec检索数据库,将记录集放入$cur变量中。再用while{$var1=odbc_result;$var2=odbc_result;...}读取odbc_exec()返回的数据集$cur。最后是odbc_close关闭数据库的连接。odbc_result()函数是取当前记录的指定字段值。

  10. Thinkphp5框架实现获取数据库数据到视图的方法

    这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部