Flutter 之頁面切換（基本路由）

時間 2021-04-14

標籤 app less ide 測試動畫 this spa code 事件欄目系統網絡简体版

原文原文鏈接

一個應用程序一般由多個頁面組成，而統一管理頁面之間跳轉的機制一般被稱爲路由管理或導航管理app

路由管理

在 Flutter 中，頁面之間的跳轉是經過 Route 和 Navigator 來管理的less

Route：頁面的抽象，主要負責建立對應的界面、接收參數、響應 Navigator 打開和關閉
Navigator：維護一個路由棧來管理 Route，Route 打開即入棧，Route 關閉即出棧，還能夠直接替換棧內的某一個 Route

根據是否須要提早註冊頁面標識符，Flutter 中的路由管理能夠分爲兩種方式ide

基本路由：無需提早註冊，在頁面切換時須要機本身構造頁面實例
命名路由：須要提早註冊頁面標識符，在頁面切換時經過標識符直接打開新的路由

基本路由

在 Flutter 中，使用基本路由要導航到一個新的頁面時，須要建立一個 MaterialPageRoute 的實例，並調用 Navigator.push 方法將新頁面壓到堆棧的頂部測試

注意：MaterialPageRoute 是一種路由模板，定義了路由建立及切換過渡動畫的相關配置動畫

返回上一頁面則須要調用 Navigator.pop 方法將該頁面從堆棧中移除ui

以下代碼演示了基本路由的使用方法：在第一個頁面的按鈕事件中打開第二個頁面，並在第二個頁面的三個按鈕事件中分別實現以下功能：回退到第一個頁面；以無參形式打開第三個頁面，並從堆棧中移除第二個頁面；以有參形式打開第三個頁面this

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

運行下代碼，效果以下spa