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()是一种很友善的退出方式，如果能退出就退出，不退出拉到
    　
•