Flutter中清空栈的方式(fluro和Flutter原生)_flutter 路由清空栈

一、fluro

在Flutter中有时候会出现一种需求，比如跳转到某个页面同时清空所有页面这里使用fluro来进行解决

相关代码如下:

 Routes.router.navigateTo(context, '/login',clearStack: true,transition: TransitionType.fadeIn);
1

其中的clearStack就是表示是否清空所有栈的意思。

二、Flutter原生

注意:以下两种方式都可以使用，这里只演示一种方式

Navigator.of(context).popUntil(ModalRoute.withName(Routers.root));//第一种
Navigator.popUntil(context,ModalRoute.withName(Routers.root));//第二种
1
2

1、移除目标页面之上所有页面

Navigator.of(context).popUntil(ModalRoute.withName(Routers.root));
1

2、跳转到目标页面并清除当前页面

 Navigator.of(context).pushReplacementNamed(Routers.page3);//第一种方式
// Navigator.popAndPushNamed(context, Routers.page3);//第二种方式
// Navigator.of(context).pushReplacement(MaterialPageRoute(//第三种方式
//     builder: (BuildContext context){
//       return Page3();
//     }
// ));
1
2
3
4
5
6
7

3、跳转到目标页面并清空所有页面

//第一种方式
//第一个参数context是上下文的context，
//第二个参数newRouteName是新的路由所命名的路径
//第三个参数predicate，返回值是bool类型，按照我的理解，就是用来判断Until所结
//束的时机，如果为false的话，就会一直继续执行Remove的操作，直到为true的时候，停止Remove操作，然后才执行push操作。
Navigator.of(context).pushNamedAndRemoveUntil(Routers.root, (Route<dynamic> route) => false);

//第二种方式
// Navigator.of(context).pushAndRemoveUntil(
//     MaterialPageRoute(
//         builder: (BuildContext context){
//           return Page2();
//         }
//     ),
//    (route) => false
// );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、清空指定页面之上的栈并添加新的页面

假如有1、2、3页面，在第三个页面跳转到第4个页面时候使用以下方式，则页面栈顺序为 1、2、4。

如果将最后一个参数改为ModalRoute.withName(Routers.page1)则页面栈为1、4

Navigator.of(context).pushNamedAndRemoveUntil(Routers.page4,ModalRoute.withName(Routers.page2));
1

5、maybePop和canPop

如果有时候页面比较多，则不知道当前页面是否可以返回，可以使用以下方式进行判断:

Navigator.of(context).canPop();
1

使用以下方式则可以使当前页面处于能退出就退出，不能退出就不处理的情况:

Navigator.of(context).maybePop();
1

三、参考链接

1. Flutter中管理路由栈的方法和应用:

   https://blog.csdn.net/weixin_34999505/article/details/86760606

2. Flutter 中路由 使用 Fluro 解决Navigator.popUntil() 问题:

   https://www.jianshu.com/p/9d858596a30a

3. Flutter Navigator基础使用:

   https://blog.csdn.net/u013894711/article/details/100600139

4. Flutter Navigator 高级用法:

   https://blog.csdn.net/u013894711/article/details/100729879