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

一、fluro

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

相关代码如下:

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

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

二、Flutter原生

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

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

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

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

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

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

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
// );

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

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

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

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

5、maybePop和canPop

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

Navigator.of(context).canPop();

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

Navigator.of(context).maybePop();

三、参考链接

  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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter,使用Fluro库实现带参数的路由非常简单。首先,你需要在route_handlers.dart文件定义一个处理函数,该函数接收参数并返回相应的界面。在这个函数,你可以使用路由参数来获取传递的参数值。例如,在你的代码,settingHandler是一个处理函数,它接收一个BuildContext对象和一个Map<String, List<String>>类型的参数params,并从params获取'id'参数的值args。然后,你可以使用该参数值来创建一个Setting界面的实例,并返回该实例。这样,当Fluro路由系统匹配到"/setting"路由时,它会调用settingHandler处理函数并传递参数。 接着,在route.dart文件,你需要配置路由并将路由与对应的处理函数关联起来。你可以使用FluroRouter的define方法来注册路由,并使用handler参数指定对应的处理函数。在你的代码,Routes类的configureRoutes方法使用了router.define方法注册了"/setting"路由,并将settingHandler作为其处理函数。这样,当导航器导航到"/setting"路由时,Fluro路由系统会调用settingHandler处理函数来处理该路由。 总结起来,要实现Flutter Fluro带参数的路由,你需要在route_handlers.dart定义处理函数,接收参数并返回相应的界面实例。然后,在route.dart配置路由并将路由与对应的处理函数关联起来。这样,当导航器匹配到相应的路由时,Fluro路由系统会调用处理函数并传递参数,从而实现带参数的路由导航。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值