Flutter入门:如何只关闭自身页面

简介: 前几天QA给我提了一个bug,说一个弹窗总是无缘无故的自己退出,而且没有任何规律,无法准确复现。我经过调查发现,我们有一个倒计时弹窗(在Flutter中弹窗其实也是页面),倒计时结束后关闭。但是在弹出倒计时后,由于一些业务逻辑又弹出另外一个弹窗,这时候如果倒计时结束调用pop,只会将新的弹窗关闭,而倒计时弹窗则无法关闭了。因为这个弹窗不是必弹的,所以导致好像后一个页面是随机无故退出似的。

问题



前几天QA给我提了一个bug,说一个弹窗总是无缘无故的自己退出,而且没有任何规律,无法准确复现。


我经过调查发现,我们有一个倒计时弹窗(在Flutter中弹窗其实也是页面),倒计时结束后关闭。但是在弹出倒计时后,由于一些业务逻辑又弹出另外一个弹窗,这时候如果倒计时结束调用pop,只会将新的弹窗关闭,而倒计时弹窗则无法关闭了。

因为这个弹窗不是必弹的,所以导致好像后一个页面是随机无故退出似的。


解决


通过上面的案例,我们可以看到虽然Flutter的路由管理很方便,push和pop就可以了,但是pop只能关闭栈顶的页面,在上面描述的场景中就显得力不从心了。

所以我们希望倒计时弹窗关闭自身,而不影响栈中其他页面。所以不能直接使用pop,而是用removeRoute,示例代码如下:


Navigator.of(context).removeRoute(ModalRoute.of(context));
复制代码


这样就会仅仅只关闭自身页面,不会影响到其他页面。

Flutter的Navigator提供了更多样的路由操作,如下:


  • removeRouteBelow(Route<dynamic> anchorRoute) 移除anchorRoute下面的那一个页面
  • popUntil(RoutePredicate predicate) 会一直pop页面,直到predicate返回true


当然push和replace也有类似的操作,大家可以自行查阅源码看看都支持哪些操作,这样在今后的开发过程中如果遇到相关问题或类似需求,就可以直接使用对应的函数即可,防止出现问题。


目录
相关文章
|
存储 缓存 Dart
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
类和成员的可见性,这在基于库或包的开发中非常重要,Dart中提供了工厂构造函数,可以方便的实现单例、缓存实例对象、返回子类等,以及常量构造函数的使用......
299 0
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
74 7
|
1月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏(`BottomNavigationBar`)和侧边栏(`Drawer`),包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏,并通过 `TabController` 控制器实现页面切换。同时,文档还提供了如何自定义导航栏样式和添加浮动操作按钮(`FloatingActionButton`)的方法。最后,整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码,帮助开发者快速构建具有导航功能的 Flutter 应用界面。
|
6月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
101 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
3月前
|
Dart 前端开发 JavaScript
Flutter&Dart-异步编程Future、Stream极速入门
Flutter&Dart-异步编程Future、Stream极速入门
72 4
Flutter&Dart-异步编程Future、Stream极速入门
|
3月前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
4月前
|
开发框架 Dart Java
Flutter入门进阶之旅(一)-初识Flutter
Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。不同的平台的原生体验应该得到保留,让该应用看起来同整个系统更加协调。不同平台的滚动操作、字体、图标 等特殊的特性 应该和该平台上的其他应用保持一致,让用户感觉就像操作原生应用一样。
60 1
|
4月前
|
Dart 搜索推荐
Flutter入门进阶之旅(二)Hello Flutter
好像几乎我们学习或者掌握任何一门编程语言都是Hello word开始的,本篇博文做为Flutter入门进阶的第一篇分享,我们也从最简单的Hello world开始,至于Flutter开发环境的配置,跟关于Dart语言的介绍,不是该专栏要讲解的内容,我就不详细做介绍了,读者可自行google或者百度了解一下。
47 0
|
5月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
6月前
|
数据库 Android开发
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画