Flutter 页面间数据传递(共享)的几种常用方式

最新推荐文章于 2024-10-08 17:46:47 发布
最新推荐文章于 2024-10-08 17:46:47 发布
阅读量1.5w 收藏 21
点赞数 9
分类专栏： 【Flutter点滴知识 】
原文链接：https://segmentfault.com/a/1190000020007938?utm_source=tuicool&utm_medium=referral
版权

前言

    在Android中，我们常遇到的场景就是在页面跳转(Frament,Activity)时候，要将当前的部分数据携带到另外一个页面中，供另外页面使用。这时候我们常用的就是使用Intent， Bundle等携带数据。

    那么在Flutter的开发过程中，页面之间的数据传递也是必不可少的，又是怎么把一个页面的数据传递(共享)给另外一个页面，或者关闭当前页面并把当前页面的数据带给前一个页面。

    本篇文章将会介绍Flutter中，页面面之间的数据传递(共享)的几种常见方式及场景。

​

在开始数据传递之前我们先创建一个传递数据的类

在Android中传递对象我们需要序列化实现 Serializable或者 Parcelable接口才能被传递，在Flutter中数据传递没有序列化的方法，直接就可以传递对象。定义一个简单的类如下： 
///用来传递数据的实体
class TransferDataEntity {
  String name;
  String id;
  int age;

  TransferDataEntity(this.name, this.id, this.age);
}

​

我们具体看看数据传递的方式

通过构造器(constructor)传递数据

    通过构造器传递数据是一种最简单的方式，也是最常用的方式，在第一个页面，我们模拟创建一个我们需要传递数据的对象。当点击跳转的时候，我们把数据传递给DataTransferByConstructorPage页面，并把携带过来的数据展示到页面上。

  • 创建一个传递数据对象

    final data = TransferDataEntity("001", "张三丰", 18);

  • 定义一个跳转到DataTransferByConstructorPage页面的方法

     _transferDataByConstructor(BuildContext context, TransferDataEntity data) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => DataTransferByConstructorPage(data: data)));
  }

  • 在DataTransferByConstructorPage页面接收到数据并展示出来，代码如下

    我们只需要做两件事：

    1.提供一个final变量 final TransferDataEntity data

    2.提供一个构造器接收参数 DataTransferByConstructorPage({this.data});

    ///通过构造器的方式传递参数
class DataTransferByConstructorPage extends StatelessWidget {
  final TransferDataEntity data;

  DataTransferByConstructorPage({this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("构造器方式"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 40.0,
            alignment: Alignment.center,
            child: Text(data.id),
          ),
          Container(
            width: double.infinity,
            height: 40.0,
            alignment: Alignment.center,
            child: Text(data.name),
          ),
          Container(
            width: double.infinity,
            height: 40.0,
            alignment: Alignment.center,
            child: Text("${data.age}"),
          )
        ],
      ),
    );
  }
}

    ​

当一个页面关闭时携带数据到上一个页面（Navigator.pop）

在Android开发中我们需要将数据传递给上一个页面通常使用的传统方式是startActivityForResult()方法。但是在flutter就不用这么麻烦了。只需要使用Navigator.pop方法即可将数据结果带回去。但是我们跳转的时候需要注意两点:

​

1.我们需要定义一个异步方法用于接收返回来的结果

///跳转的时候我们需要使用异步等待回调结果 dataFromOtherPage 就是返回的结果
_toTransferForResult(BuildContext context, TransferDataEntity data) async {
    final dataFromOtherPage = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => TransferRouterPage(data: data)),
    ) as TransferDataEntity;
  }

​

2.在我们要关闭的页面使用Navigator.pop 返回第一个页面

//返回并携带数据
  _backToData(BuildContext context){
    var transferData = TransferDataEntity("嘻嘻哈哈","007",20);
    Navigator.pop(context,transferData);
  }

​

InheritedWidget方式

官网给出的解释：InheritedWidget是Flutter中非常重要的一个功能型Widget，它可以高效的将数据在Widget树中向下传递、共享，这在一些需要在Widget树中共享数据的场景中非常方便，如Flutter中，正是通过InheritedWidget来共享应用主题(Theme)和Locale(当前语言环境)信息的。

InheritedWidget和React中的context功能类似，和逐级传递数据相比，它们能实现组件跨级传递数据。InheritedWidget的在Widget树中数据传递方向是从上到下的，这和Notification的传递方向正好相反。

优点：可以控制每个Widget单独去取数据并使用

如果一个页面只存在同一层级的Weiget这时候使用构造器的方式当然是最简单的，也是最方便的，但是如果一个页面存在多个层级的Weiget这时候构造器的方法就有了局限性，这时候我们使用InheritedWidget 是一个比较好的选择。

使用InheritedWidget方式如下几步：

  • 继承InheritedWidget提供一个数据源

    class IDataProvider extends InheritedWidget{

  final TransferDataEntity data;

  IDataProvider({Widget child,this.data}):super(child:child);


  @override
  bool updateShouldNotify(IDataProvider oldWidget) {
    return data!=oldWidget.data;
  }

  static IDataProvider of(BuildContext context){
    return context.inheritFromWidgetOfExactType(IDataProvider);
  }
}

  • 定义页面跳转时候携带数据的方法

    ///跳转到IDataWidget页面并携带数据
_inheritedToPage(BuildContext context, TransferDataEntity data) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => IDataProvider(
                  child: IDataWidget(),
                  data: data,
                )));
  }

  • 跳转的到的页面并展示数据代码如下

    class IDataWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = IDataProvider.of(context).data;

    return Scaffold(
      appBar: AppBar(
        title: Text("Inherited方式传递数据"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.name),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.id),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text("${data.age}"),
          ),
          IDataChildWidget()
        ],
      ),
    );
  }
}

class IDataChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = IDataProvider.of(context).data;
    return Container(
      child: Text(data.name),
    );
  }
}

​

我们将上面的IDataProvier进行改造加入泛型就可以通用了

1.修改后的Provider类如下

class IGenericDataProvider<T> extends InheritedWidget {
  final T data;

  IGenericDataProvider({Key key, Widget child, this.data})
      : super(key: key, child: child);

  @override
  bool updateShouldNotify(IGenericDataProvider oldWidget) {
    return data != oldWidget.data;
  }

  static T of<T>(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(
            IGenericDataProvider<T>().runtimeType) as IGenericDataProvider<T>).data;
  }
}

2.使用跳转的时候修改代码如下(主要是添加泛型支持)

_inheritedGenericToPage(BuildContext context, TransferDataEntity data) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => IGenericDataProvider<TransferDataEntity>(
              child: IDataWidget(),
              data: data,
            )));
  }

​

接收传递的值的方式如下

IGenericDataProvider.of<TransferDataEntity>(context) 可以直接取值

class IGenericDataWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = IGenericDataProvider.of<TransferDataEntity>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text("Inherited泛型方式传递数据"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.name),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.id),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text("${data.age}"),
          ),
        ],
      ),
    );
  }
}

​

全局的提供数据的方式

这种方式我们还是使用InheritedWidget，区别就是我们不是跳转的时候去创建IGenericDataProvider。而是把他放在最顶层

注意：这种方式一定要把数据放在顶层

​

定义顶部数据

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  //传递值的数据
  var params  = InheritedParams();

  @override
  Widget build(BuildContext context) {
    return IGenericDataProvider(
      data: params,
      child: MaterialApp(
        title: 'Data Transfer Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Data Transfer Demo'),
      ),
    );
  }
}

​

接收数据的方式基本和 InheritedWidget相同

final data = IGenericDataProvider.of<TransferDataEntity>(context)，获取数据

class InheritedParamsPage extends StatefulWidget {
  @override
  _InheritedParamsPageState createState() => _InheritedParamsPageState();
}

class _InheritedParamsPageState extends State<InheritedParamsPage> {
  @override
  Widget build(BuildContext context) {
    final data = IGenericDataProvider.of<TransferDataEntity>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("通过全局数据方式"),
      ),
      body:Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.name),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.id),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text("${data.age}"),
          ),
        ],
      ),
    );
  }
}

​

通过全局单例模式来使用

这种方式就是创建一个全局单例对象，任何地方都可以操控这个对象，存储和取值都可以通过这个对象

​

  • 创建单例对象
class TransferDataSingleton {
  static final TransferDataSingleton _instanceTransfer =
      TransferDataSingleton.__internal();

  TransferDataEntity transData;

  factory TransferDataSingleton() {
    return _instanceTransfer;
  }

  TransferDataSingleton.__internal();
}

final transSingletonData = TransferDataSingleton();

​

  • 给单例对象存放数据
 _singletonDataTransfer(BuildContext context) {
    var transferData = TransferDataEntity("二汪", "002", 25);
    transSingletonData.transData = transferData;
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => TransferSingletonPage()));
  }

​

  • 接收并使用传递的值
class TransferSingletonPage extends StatefulWidget {
  @override
  _TransferSingletonPageState createState() => _TransferSingletonPageState();
}

class _TransferSingletonPageState extends State<TransferSingletonPage> {
  @override
  Widget build(BuildContext context) {
    //直接引入单例对象使用
    var data = transSingletonData.transData;
    return Scaffold(
      appBar: AppBar(
        title: Text("全局单例传递数据"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.name),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text(data.id),
          ),
          Container(
            alignment: Alignment.center,
            height: 40.0,
            child: Text("${data.age}"),
          ),
        ],
      ),
    );
  }
}

​

全局单例结合Stream的方式传递数据

  • 创建一个接受全局的单例对象，并把传递值转成Stream方式
  • 在接收数据可以使用StreamBuilder直接接收并处理
class TransferStreamSingleton {
  static final TransferStreamSingleton _instanceTransfer =
      TransferStreamSingleton.__internal();
  StreamController streamController;

  void setTransferData(TransferDataEntity transData) {
    streamController = StreamController<TransferDataEntity>();
    streamController.sink.add(transData);
  }

  factory TransferStreamSingleton() {
    return _instanceTransfer;
  }

  TransferStreamSingleton.__internal();
}

final streamSingletonData = TransferStreamSingleton();

​

  • 传递要携带的数据
 _streamDataTransfer(BuildContext context) {
    var transferData = TransferDataEntity("三喵", "005", 20);
    streamSingletonData.setTransferData(transferData);
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => TransferStreamPage()));
  }

​

  • 接收要传递的值
class TransferStreamPage extends StatefulWidget {
  @override
  _TransferStreamPageState createState() => _TransferStreamPageState();
}

class _TransferStreamPageState extends State<TransferStreamPage> {

  StreamController _streamController = streamSingletonData.streamController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("全局单例结合Stream"),
        ),
        body: StreamBuilder(
                stream: _streamController.stream,
                initialData: TransferDataEntity("", "", 0),
                builder: (context, snapshot) {
                  return Column(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.center,
                        height: 40.0,
                        child: Text(snapshot.data.name),
                      ),
                      Container(
                        alignment: Alignment.center,
                        height: 40.0,
                        child: Text(snapshot.data.id),
                      ),
                      Container(
                        alignment: Alignment.center,
                        height: 40.0,
                        child: Text("${snapshot.data.age}"),
                      ),
                    ],
                  );
                }));
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }
}

​

总结

    以上是我们在在Flutter中常用的几种页面之间传递数据的方式，其中最后一种方式提到了 Stream和 StreamBuilder我有一篇文章专门介绍了 Flutter的 Stream。 Flutter Stream简介及使用 详细的介绍了 Stream及部分操作的使用。

    现在官方推荐的provider实际上就是使用了InheritedWidget有时间的话建议详细了下InheritedWidget及使用方法。

    以上是对页面之间值传递的一个总结，本文Demo，如有写的不足之处，望指正~

barnett_y
关注
专栏目录
第 3-3 课：数据共享与传递
持续学习中
09-22 324
在使用 Flutter 开发的过程中，我们可能需要进行数据的页面之间的传递、共享或者全局的一个事件、状态管理和监听。那么这节课我们将介绍 Flutter 中实现数据共享与传递的方法，并配合实例进行详细讲解。本节将主要介绍： InheritedWidget 实现数据共享与传递 ScopedModel 实现数据共享与传递 Redux 实现数据共享与传递 EventBus 实现数...
【Flutter原理】深入理解跨组件共享Provider
人生百年几今日，今日不为真可惜。
11-12 3628
背景 通过前面的文章深入理解InheritedWidget和文章深入理解Notification，我们知道Flutter原生提供了两种组件之间数据共享的组件自上而下的共享数据方式采用InheritedWIgdt，自下而上的数据共享方式采用Notification，如果是跨页面共享数据呢？ 跨页面/组件共享状态的管理方式比较多，比如全局时间总线EventBus，它是一个第三方的插件，使用观察者模式实现，通过它可以实现跨组件状态同步。但是它有两个缺点： 必须显示定义各种事件，不好管理 需要手动注册和取消注册，
Flutter 页面返回传值
10-11
Flutter 页面返回传值需要注意的几点如下： 1、跳转页面时要使用async关键字修饰方法体    声明内部代码需要延迟执行 skipPage(BuildContext context) async { } 2、跳转动作要使用await关键字修饰（Dart规定有async标记的函数，只能由await来调用） 声明延迟执行后赋值 final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => PageA())); 3、返回页面时传值 Navigator.pop(context, '我是返回数据');
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享？
最新发布
yang295242361的博客
10-08 469
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享？
flutter页面间传值方式
qq_33790748的博客
12-03 593
这里附上大神的方式：https://my.oschina.net/u/248241/blog/1796503
Flutter学习 — 给新页面传值
qq_27494201的博客
06-18 846
效果图一： 点击跳转 效果图二： 点击第四项后并传值到下一个页面来显示 代码+注释： import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; /** * 定义主页。 添加一个打开选择页面的按钮。 在选择页面上显示两个按钮。 点击一个按钮时，关闭选择的页面。 主页上弹出一个snackbar以显示用户的选择。 */ class Todo { final Str
Flutter 页面跳转和传值的实现
chinaherolts2008的博客
07-21 198
每当你跳转到一个新页面时，Navigator 会将新页面的 Route 压栈（push），当你返回到之前的页面时，它会将当前页面的 Route 出栈（pop）。在 Android 上，它通常是一个从屏幕底部向上滑入的动画，而在 iOS 上，它通常是一个从屏幕右侧滑入的动画。命名路由是一种用于管理页面导航的技术，它允许你为每个页面分配一个唯一的名称，并通过这些名称在应用程序中进行页面之间的导航。routes 是一个 Map，它的键是字符串（路由的名称），而值是对应的构造器函数，返回相应的页面 Widget。
flutter如何引用传值_Flutter 页面间数据传递(共享)的几种常用方式
weixin_39787606的博客
12-24 1454
前言在Android中，我们常遇到的场景就是在页面跳转(Frament,Activity)时候，要将当前的部分数据携带到另外一个页面中，供另外页面使用。这时候我们常用的就是使用Intent， Bundle等携带数据。那么在Flutter的开发过程中，页面之间的数据传递也是必不可少的，又是怎么把一个页面的数据传递(共享)给另外一个页面，或者关闭当前页面并把当前页面的数据带给前一个页面。本篇文章将会介...
flutter和native通讯的3种方式
晨风的小窝
05-07 788
flutter和native通讯的3种方式 flutter和android原生的通讯方式一共有3种，分别是： BasicMessageChannel，MethodChannel，EventChannel 下面是每种通讯方式的主要代码： BasicMessageChannel： //flutter定义 var channel = BasicMessageChannel('channel_name', StandardMessageCodec()); //flutter发送消息到native v
Flutter：学会在页面间传递参数
weixin_34162401的博客
04-06 3044
目录传送门：《Flutter快速上手指南》先导篇在 Flutter 中，有一套自己的页面传参机制。我们仍然需要通过 Navigator 来实现页面间的传参。1.如何进行页面传参Flutter 中页面传参的思路是，为页面 Widget 的构造函数中增加参数，通过构造函数来给页面传参。class HomePage extends StatelessWidget { final PageData d...
[Flutter]页面跳转和传值
Gamin
03-31 3822
命名路由是一种用于管理页面导航的技术，它允许你为每个页面分配一个唯一的名称，并通过这些名称在应用程序中进行页面之间的导航。命名路由，由一对字符串（路由名称）和对应的屏幕（或称为页面/视图）组成。命名路由的好处提高代码可维护性命名路由使得路由和它们对应的屏幕解耦，这让查找和修改特定路由相关的代码变得更加容易。简化路由管理当应用的结构变得更为复杂时，使用命名路由可以帮助集中管理路由，而不是在代码中散布大量的和。配置命名路由我们可以在的routes属性中定义所有的命名路由。routes。
Flutter移动应用开发实战——跨页面传递数据
aming小老弟
06-11 464
QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。 ...
Flutter实战-页面参数传递
ITDogFire
08-18 1656
用了两年的flutter，有了一些心得，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）注意：无特殊说明，flutter版本为3.0+页面参数传递不管是在web前端，还是客户端都是一个必备的，我们通常遇到的场景是比如：（1） 传递数据id，到新的页面请求详情（2）传递一些状态值给新的页面做一些判断（3）传递整个对象，或者对象数组到新的页面 来处理数据我们知道页面传递数据和网页拼接url一
flutter如何引用传值_详解Flutter给新页面传值
weixin_35544325的博客
01-14 209
直接上代码，一个完整的demoimport 'package:flutter/foundation.dart';import 'package:flutter/material.dart';class Todo {final String title;final String description;Todo(this.title, this.description);}void main() {...
flutter --路由管理--跳转页面且传值的方式
Chents
01-29 487
在 Flutter 中，页面之间的跳转是通过 Route 和 Navigator 来管理的： Route 是页面的抽象，主要负责创建对应的界面，接收参数，响应 Navigator 打开和关闭； 而 Navigator 则会维护一个路由栈管理 Route，Route 打开即入栈，Route 关闭即出栈，还可以直接替换栈内的某一个 Route。而根据是否需要提前注册页面标识符， Flutter 中的路...
Flutter功能型组件之数据共享
Dream It Possible
02-10 642
前言   InheritedWidget提供了一种数据在widget树中从上到下传递、共享的方式，例如在应用的根widget中通过InheritedWidget共享了一个数据，那么便可以在子widget中来获取该共享的数据。InheritedWidget在widget树中数据传递方向是从上到下的，这和Notification的传递方向是相反的。 代码示例 // 数据共享(InheritedWidget) // InheritedWidget提供了一种数据在widget树中从上到下传递、共享的方式，
Laravel 5 多个视图共享数据的方法
weixin_34110749的博客
11-17 156
2019独角兽企业重金招聘Python工程师标准>>> ...
Flutter 使用 Provider 实现不相关页面状态数据共享
Flutter 跨平台技术研究
01-13 1428
不相关的页面可以通过 Provider 的 value方式实现状态共享，但是状态共享可能会存在缓存问题，因此需要考虑清除状态缓存的问题。
flutter 数据共享
09-02
在Flutter中，有几种方法可以实现数据共享： 1. InheritedWidget：InheritedWidget是Flutter中的一个特殊widget，它可以在组件树中向下传递共享的数据。你可以创建一个继承自InheritedWidget的自定义类，并将需要共享的数据存储在该类中。然后，在需要获取共享数据的子组件中，可以使用InheritedWidget的of方法获取共享数据。 2. Provider：Provider是Flutter社区中广泛使用的一个状态管理库。它基于InheritedWidget实现了一套更简单和更灵活的数据共享方案。你可以使用Provider提供和访问共享的数据，它还支持依赖注入和数据更新通知。 3. ScopedModel：ScopedModel是Flutter框架提供的另一个状态管理解决方案。它通过创建一个继承自Model的自定义类来实现数据共享。你可以将需要共享的数据存储在Model类中，并通过ScopedModelDescendant widget在需要获取数据的子组件中访问。 4. Redux：Redux是一种基于Flux架构思想的状态管理库。它通过创建一个全局的状态存储，将所有的应用状态都存储在一个单一的Store中。你可以使用Redux提供和访问共享的数据，并通过定义不同的Action和Reducer来管理数据的更新。 以上这些方法都可以实现在Flutter应用中进行数据共享，具体选择哪种方法取决于你的需求和个人偏好。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值