Navigator 高級用法

• PushAndRemove

  • Navigator.pushAndRemoveUtil,Navigator.pushNamedAndRemoveUntil()

  • 本例中我們的跳轉順序是Screen1—>Screen2—>Screen3—>Screen4

    當從Screen3跳轉到Screen4的時候我們希望將Screen2，Screen3從棧里面移除掉，這樣在Screen4點擊返回就能直接回到Screen1

    使用Navigator.pushAndRemoveUtil()或者Navigator.pushNamedAndRemoveUntil()實現，這個方法有兩個必傳參數newRoute和predicate，第一個參數表示將要加入棧中的頁面，第二個參數表示棧中要保留的頁面底線，意思就是在predicate和newRoute之間的頁面都會被移除棧

  • class Screen3 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          alignment: Alignment.center,
          child: RaisedButton(
            onPressed: () {
              //跳轉到screen4，並且移除所有的頁面直到screen1
    //          Navigator.of(context).pushNamedAndRemoveUntil(
    //              '/screen4', ModalRoute.withName('/screen1'));
              Navigator.of(context).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (context) => Screen4()),
                  ModalRoute.withName('/screen1'));
     
            },
            child: Text(
              'screen3',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      }
    }

     

• pushReplacement

  • 假設我們在做一個登錄功能，在登錄成功后需要跳轉到一個新的頁面並且銷毀當前登錄頁，這時候就可以用pushReplacement來實現，從字面上的意思看push很好理解，把一個新頁面壓入棧中嘛，replacement到底是替代那個頁面呢？答案是當前頁，因為被替換的對象是固定的，所以該方法的必傳參數只有被push的路由。　　

  • class Screen3 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          alignment: Alignment.center,
          child: RaisedButton(
            onPressed: () {
              //打開Screen4頁面，並銷毀當前頁
              Navigator.of(context).pushReplacementNamed('/screen4');
     
              //也可以使用以下方式
             //Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context)=>Screen3()));
            },
            child: Text(
              'screen3',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      }
    }

     

• popUntil

  • 這個比較簡單，從字面意思上就可以看出是“一直退出直到某一個頁面”，來看一下用法吧

  • class Screen4 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          alignment: Alignment.center,
          child: RaisedButton(
            onPressed: () {
              //當前在Screen4頁面，點擊回到Screen1，連帶着Screen2，Screen3也一起退出
              Navigator.of(context).popUntil(ModalRoute.withName('/screen1'));
            },
            child: Text(
              'screen4',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      }
    }

     

    　　

• popAndPushNamed

  • 這個方法和pushReplacement很相近，都是開啟一個新的頁面並且銷毀之前的頁面，只是在邏輯上的執行順序不一樣，popAndPushNamed是退出當前頁面並且將新的頁面放到它原來的位置上，所以在視覺效果上是先退出再進入

  • class Screen2 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          alignment: Alignment.center,
          child: RaisedButton(
            onPressed: () {
              //點擊退出當前頁面，並將Screen3壓入棧中
              Navigator.of(context).popAndPushNamed('/screen3');
            },
            child: Text(
              'screen2',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      }
    }

     

    　　

• maybePop和canPop

  • Navigator.of(context).canPop()返回一個bool值，表示當前頁面是否可以退出

  • 　Navigator.of(context).maybePop()是一種很友善的退出方式，如果能退出就退出，不退出拉到
    　
•