路由管理

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

執行下程式碼，效果如下

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