Flutter 之页面切换（基本路由）

一个应用程序通常由多个页面组成，而统一管理页面之间跳转的机制通常被称为路由管理或导航管理

路由管理

在 Flutter 中，页面之间的跳转是通过 Route 和 Navigator 来管理的

• Route：页面的抽象，主要负责创建对应的界面、接收参数、响应 Navigator 打开和关闭
• Navigator：维护一个路由栈来管理 Route，Route 打开即入栈，Route 关闭即出栈，还可以直接替换栈内的某一个 Route

根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式

• 基本路由：无需提前注册，在页面切换时需要机自己构造页面实例
• 命名路由：需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由

基本路由

在 Flutter 中，使用基本路由要导航到一个新的页面时，需要创建一个 MaterialPageRoute 的实例，并调用 Navigator.push 方法将新页面压到堆栈的顶部

注意：MaterialPageRoute 是一种路由模板，定义了路由创建及切换过渡动画的相关配置

返回上一页面则需要调用 Navigator.pop 方法将该页面从堆栈中移除

如下代码演示了基本路由的使用方法：在第一个页面的按钮事件中打开第二个页面，并在第二个页面的三个按钮事件中分别实现如下功能：回退到第一个页面；以无参形式打开第三个页面，并从堆栈中移除第二个页面；以有参形式打开第三个页面

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
            child: new FloatingActionButton(
                child: Text('跳转'),
                // 打开第二个页面
                onPressed: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SecondPage()),
                  );
                })));
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text("第二页"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FloatingActionButton(
                  child: new Text('关闭'),
                  // 回退到第一个页面
                  onPressed: () {
                    Navigator.pop(context);
                  }),
              new RaisedButton(
                  child: new Text('第三页，无参'),
                  // 以无参形式打开第三个页面，并从堆栈中移除当前页面
                  onPressed: () {
                    Navigator.pop(context);
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new ThreePage()));
                  }),
              new FlatButton(
                  onPressed: () {
                    // 以有参形式打开第三个页面
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ThreePage('Android小白营')));
                  },
                  child: Text('第三页，有参'))
            ],
          ),
        ));
  }
}

class ThreePage extends StatelessWidget {
  String name;

  ThreePage([this.name]);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('第三页'),
          centerTitle: false,
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              new FlatButton(
                  onPressed: () => Navigator.pop(context), child: Text('回退')),
              new Text(name ??= '测试')
            ])));
  }
}

运行下代码，效果如下

可以看到，使用基本路由导航到一个新页面时，可以通过新页面的构造方法进行传参，跳转新页面时，可以将当前页面从堆栈中移除，也可以保留，如果移除，则新页面回退时，会回退到上上个页面，而如果保留，则新页面回退时，会回退到启动新页面的页面，即回退到上一个页面