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 ??= '測試')
            ])));
  }
}

運行下代碼，效果如下

可以看到，使用基本路由導航到一個新頁面時，可以通過新頁面的構造方法進行傳參，跳轉新頁面時，可以將當前頁面從堆棧中移除，也可以保留，如果移除，則新頁面回退時，會回退到上上個頁面，而如果保留，則新頁面回退時，會回退到啓動新頁面的頁面，即回退到上一個頁面