Flutter基础（十二）路由（页面跳转）与数据传递

本文首发于公众号「刘望舒」

ReactNative入门系列
React Native组件
Flutter基础系列

前言

在Android开发中我们使用Intent来进行页面跳转，也称之为原生路由，后来出现了一些路由框架，比如ARouter。
在Flutter中进行界面跳转的就是路由，路由用Route类来进行表示，Navigator是对Route进行管理的Widget。这一篇文章我们来学习路由和数据传递。flutter路由的使用方式主要有两种，一种是新建路由，一种是注册路由。

1.新建路由

创建两个页面，第一个页面有一个按钮，点击这个按钮跳到第二个页面。先来实现第一个页面：

class FirstPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text("第一页"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("跳转到第二页"),
          onPressed: () {
   
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SecondPage(), maintainState: false));
          },
        ),
      ),
    );
  }
}

通过Navigator.push()方法将一个Route对象添加到Navigator管理的Route堆栈中，这里的Route对象是一个MaterialPageRoute，它自带页面切换动画，并且适配了Android和iOS，如果是Android，页面进入动画是向上滑动并淡出，退出是相反的；如果是iOS，页面进入动画是从右侧滑入，退出同样是相反的。一般来说使用MaterialPageRoute就够用了，如果不满足需求，可以实现自定义Route。
接着来实现第二个页面，代码如下所示。

class SecondPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text("第二页"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("返回到第二页"),
          onPressed: () {
   
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Navigator.pop()方法用于关闭当前页面，返回上一个页面，并将当前的Route对象从Navigator管理的Route 堆中移除。
完整的代码如下所示。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: "Flutter",
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return