flutter如何引用传值_Flutter 页面间数据传递(共享)的几种常用方式

前言

在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: [

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