第十四回：如何在页面之间传递数据

我们在上一章回中介绍了Route和Navigator相关的内容,本章回中将介绍如何在 页面之间传递数据。闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的数据传递表示把数据从一个页面传递到另外一个页面。在上一章回中介绍完在页面之间跳转的内容后，我们接着介绍在页面之间传递数据，因为在页面跳转时伴随着数据传递。

实现方法

1. 在页面所属的Widget中定义一个属性（或者叫变量）,我们给它取名叫data；
2. 在页面所属Widget的构造方法中给data变量赋值；
3. 创建该页面的对象时通过构造方法对页面对象初始化，其中包含对data变量的初始化操作；
4. 把页面对象当作Route的成员，使用Route进行页面跳转的同时传递数据；

示例代码

上面的方法比较抽象，我们通过具体的代码来演示如何在页面之间传递数据；

class SecondRouter extends StatelessWidget {
  const SecondRouter({Key? key,required this.data}) : super(key: key);

  final String data;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: const Text("This is the second page"),
        backgroundColor: Colors.purpleAccent,
      ),
      body: OutlinedButton(
        onPressed: (){
          Navigator.pop(context,
              MaterialPageRoute(builder: (context){
                return const MyHomePage(title: "Back to Home");
              })
          );
        },
        // child: const Text("Back"),
        child: Text(data),
      ),
    );
  }
}

上面的代码大部分内容和上一章回中的代码一致，不一样的地方在于我们定义了新的属性:data，并且修改了该类的构造方法，在构造方法中初始化data属性。我们把代码中OutlinedButton中显示的文字修改成了data的内容，这样在接收到新数据后就可以在Button上面显示出来。下面是创建该页面对象的代码：

  ElevatedButton(
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return SecondRouter(data: "send data");
    }));
  },
  child: Text(
    title,
  ),
),

上面代码中，我们创建了SecondRouter这个类表示的页面对象，创建对象时把data初始化为"send data",然后把该对象放到了MaterialPageRoute中，这样在页面跳转时就可以传递数据到SecondRouter这个页面中。最后，我们把页面跳转的方法封装到了ElevatedButton的事件响应方法中(onPressed),点击该Button时就会跳转到SecondRouter页面中，同时也会发生数据传递，被传递数据会显示在SecondRouter页面中的Button上面。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

此外，我们在这里只演示了部分程序代码，我把完整的项目代码放到了Github上，本章回的内容与ex006_xxx这个文件的中的代码相对应。

看官们，关于"如何在页面之间传递数据"的内容就介绍到这里，欢迎大家在评论区交流与讨论!