Flutter(二十五)——路由栈

简介: Flutter(二十五)——路由栈

前言


在前面,我们介绍了动态路由,静态路由以及路由的传参,博主也提到过“路由栈”的基本概念。但在实际项目中,路由的控制方法并不仅仅只有这些,这是因为实际情况更加的复杂多变,所以这一篇博主,博主将深入地讲解路由栈的知识


路由栈的详解


前面介绍,一个路由是用过push(或者pushNamed)方法之后,进行跳转界面的,而出栈我们通过pop方法出栈,它的原理图下图所示:

如上图所示,当我们从page1跳转到界面page2的时候,就是往堆栈的顶端插入这个页面,因为堆栈只有一个出口,所以回到page1界面的时候,就需要把顶部的page2页面移除堆栈。


因为,我们得出了这样一个结论:在Flutter开发中,Navigator里的push方法把元素添加到堆栈的顶部,而pop方法则删除了顶部的元素。


在Android里面,Android启动模式有4种,即standard,singleTop,singleTask,singleInstance,通过intent跳转之后,他们的Activity栈是不是一样的呢?其实push,pop与Android里的standard启动模式类似,在Flutter开发中,也考虑到了类似Android的各种启动模式的实现,下面我们来一一讲解。


pushReplancementNamed方法


假设现在路由栈中有3个page,现在我们需要跳转到page4页面。这一次我们不通过page3直接push,而是调用另一个方法pushReplacementNamed,代码如下:

Navigator.of(context).pushReplacementNamed('/page4');

这是时候路由栈的图,应该如下图所示:

由于我们调用了pushReplacementNamed方法,这个方法就是替换的意思,执行完pushReplacementNamed方法后,page3就没有了。如果这个时候执行pop方法,则路由栈就只会剩下page1和page2。


popAndPushNamed方法


与pushReplacementNamed方法类似的还有popAndPushNamed方法,其执行结果栈是的路由栈与pushReplacementNamed方法的效果是一致的。不同的是,page3会同时有pop的转场效果和从page2页push的转场效果。也就是说调用了popAndPushNamed方法,转换页面就有了动画效果。


从交互体验上来说,popAndPushNamed有pop的效果,是一种选择并携带选择结果返回的效果。


pushNamedAndRemoveUntil方法


在App里,有一个普遍存在的场景,即打开一个App之后,会出现App的启动页,然后进入欢迎页面,最后才是首页。在这种情况下,用户选择返回,是应该从首页退出App的,而不是再次倒退到欢迎页和启动页。这个时候,pushNamedAndRemoveUntil方法就派上用场了。我们可以通过以下的方式调用,让整个路由栈里只存在一个界面,调用代码如下:

Navigator.of(context).pushNamedAndRemoveUntil('/homepage',(Route<dynamic> route)=>false);

其中(Route route)=>false能确保删除之前所有路由栈中的页面,实现的效果图如下:

除了这种首页欢迎图的界面跳转情况外,我们还有一种跳转情况,比如从page1一次跳转到page5后,在pop时,我想直接回到page2怎么办?其实我们改变以下上面的代码就行,代码如下:

Navigator.of(context).pushNamedAndRemoveUntil('/page5',ModalRoute.withName('/page2'));

这段代码实现的效果如下图所示:


popUntil方法


popUntil和上面说的pushNamedAndRemoveUntil的第二种用法类似,只不过没有push操作,而是直接pop到指定界面,我们来看以下其调用的代码:

Navigator.popUntil(context,ModalRoute.withName('/page2'));

这段代码实现的效果如下图所示:

路由栈的各种Flutter官方提供给我们的方法我们今天就讲解到这里,下一篇博文讲解自定义路由的相关知识。

相关文章
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
130 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1567 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
15天前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
62 1
|
1月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
|
6月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
782 0
|
4月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
41 0
|
6月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
109 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
6月前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
287 0
|
6月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
215 0
|
6月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
345 0