经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Flutter » 查看文章
详解Flutter中数据传递的方式
来源:jb51  时间:2022/6/27 10:53:53  对本文有异议

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

1、构造方法传递

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

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

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

2、InheritedWidget

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

示例代码:

  1. /// 数据共享
  2. class TestData extends InheritedWidget {
  3. final Widget child;
  4. final String data; // 共享数据
  5.  
  6. // 构造
  7. const TestData({
  8. Key? key,
  9. required this.child,
  10. required this.data,
  11. }) : super(key: key, child: child);
  12.  
  13. /// 定义一个静态方法 获取数据
  14. static String of(BuildContext context) {
  15. // return context.dependOnInheritedWidgetOfExactType<TestDataestData>()?.data??"数据有误";
  16. return (context.getElementForInheritedWidgetOfExactType<TestData>()?.widget as TestData).data ;
  17. }
  18. @override
  19. bool updateShouldNotify(covariant TestData oldWidget) {
  20. return child != oldWidget.child;
  21. }
  22. }

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

两种更新数据方法:

dependOnInheritedWidgetOfExactType: 子组件更新didChangeDependencies();

getElementForInheritedWidgetOfExactType: 不更新。

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

优点: 自上而下,无需一级一级传递,传递方便。

缺点: 不能跨组件传递。

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

3、Notification

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

定义传递数据类:

  1. class TestDataN extends Notification{
  2. final String data;
  3. TestDataN(this.data);
  4. }

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

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

在父组件进行监听:

  1. NotificationListener(
  2. onNotification: (data){
  3. print("data$data");
  4. return true;
  5. },child: child);

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

4、Stream & event_bus

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

eventBus示例代码:

  1. // 创建公用对象
  2. EventBus eventBus = EventBus();
  3. // 监听数据
  4. eventBus.on().listen((event) {
  5.  
  6. });
  7. // 发送
  8. eventBus.fire(event);

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

优点: 可以跨组件通信。

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号