flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级。
返回上一级
在前面的例子中,当从Home.dart页面跳转到Search.dart页面后,除了系统自带的返回按钮,我们还自定义了一个按钮,然后使用Navigator.of(context).pop()开返回上一级页面。
路由替换
在实际项目中,仅仅上面的路由跳转和返回上一级是不能满足需求的,例如在一个项目中,有一个注册的需要,用户在用户中心点击注册按钮后,跳转到注册页面,但是我们知道,注册是需要分几个步骤完成的:
假设注册需要分上面的三个步骤,那么当用户在第二个步骤或者第三个步骤的时候,突然不想注册,于是点击左上角的返回,是希望返回到用户中心,而不是上一个注册步骤,此时,仅仅依靠前面的路由跳转是不能实现的,而是要借助flutter的路由替换功能。
首先是在用户中心页面,点击注册按钮,跳转到registerFirst 的页面。
然后在registerFirst 的页面,输入手机号以后,点击下一步,跳转到registerSecond的页面。
这个时候在registerSecond的页面,点右上角的返回,退出注册时,就会返回到registerFirst 的页面,如果我们此时想要返回到用户中心页面的话,就需要在registerFirst 的页面,使用路由替换来进行页面跳转,因为registerFirst 页面的上一级就是用户中心,当使用registerSecond页面替换registerFirst 页面的时候,registerSecond页面的上一级就是用户中心页面了。
返回根路由
但是,此时还有一个新的问题,我们是从用户中心开始注册的,当注册完成后,是希望能直接回到注册中心,但是在上面的操作中,直接返回到了tab的第一页面,因此,还需要继续修改Tabs.dart页面:
然后在registerThird 页面返回根目录的时候,写入需要返回tab的索引就可以了:
代码下载:点这里(w033)
flutter中的路由跳转的更多相关文章
- Flutter中管理路由栈的方法和应用
原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...
- Flutter 中的路由
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航. 并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.po ...
- angular2 Router类中的路由跳转navigate
navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...
- vue中通过路由跳转的三种方式
原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...
- Flutter中的普通路由与命名路由(Navigator组件)
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
- 16Flutter中的路由 基本路由 基本路由跳转传值(上)
/* Flutter中的普通路由.普通路由传值.命名路由.命名路由传值 Flutter中的路由通俗的讲就是页面跳转.在Flutter中通过Navigator组件管理路由导航. 并提供了管理堆栈的方法. ...
- Flutter 中的基本路由
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
随机推荐
- delphi之猥琐的webserver实现
http://www.birdol.com/cainiaobiancheng/238.html delphi之猥琐的webserver实现 菜鸟编程 十五楼的鸟儿 7年前 (2009-01-01) ...
- Grafana 下载与安装(v5.4.1)
官网地址: https://grafana.com/grafana/download Linux Ubuntu & Debian(64 Bit) SHA256: 3ccbdba9e7429f5 ...
- 配置最漂亮的PyCharm界面,Python程序员必备!
高逼格超美的IDE界面,是每个程序员的梦想! 随着人工智能/机器学习的兴起,Python作为一门“漂亮的语言”,再次获得广大程序员的关注.而JetBrains出品的PyCharm无疑是最好用的Pyth ...
- spring-第十八篇之spring AOP基于XML配置文件的管理方式
1.在XML配置文件中配置切面.切入点.增强处理.spring-1.5之前只能使用XML Schema方式配置切面.切入点.增强处理. spring配置文件中,所有的切面.切入点.增强处理都必须定义在 ...
- Shell脚本语言学习总结
Shell 是一种脚本程序,只要有一个能编写代码的文本编辑器和一个能解释执行的脚本解释器就可以了. 编写第一个Shell 程序 在linux命令行执行 [root@iz2zeexr9tk4ckr7dp ...
- [NOIP2016PJ]魔法阵
今天模拟赛的题,,,唯一没有Giao出来的题(不然我就AKIOI了~) 最开始没想到数学题,把所有部分分都说一遍吧: 35分:纯暴力O(M^4)枚举,对于每一组a,b,c,d验证其是否合法. 60分: ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
- python学习二十一天文件可读,可写,可执行的操作
文件无非是可读,可写,可执行的操作,分别对应的模式 r ,w,x,只读模式,只写模式,只执行模式,a模式为追加模式,实际也是写操作模式,r+,w+,a+ 可读写模式,下面详细说模式的用法 1,文件的模 ...
- POJ 3764 The xor-longest Path (01字典树)
<题目链接> 题目大意: 给定一颗$n$个节点$(n\leq10^5)$,有边权的树,其边权$(0\leq w < 2^{31})$.让你求出这棵树上任意两个节点之间的异或最大值. ...
- Task总结
1.Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: ◆ ThreadPool不支持线程的取消.完成.失败通知等交互性 ...