在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级。

返回上一级

在前面的例子中,当从Home.dart页面跳转到Search.dart页面后,除了系统自带的返回按钮,我们还自定义了一个按钮,然后使用Navigator.of(context).pop()开返回上一级页面。

       

路由替换

在实际项目中,仅仅上面的路由跳转和返回上一级是不能满足需求的,例如在一个项目中,有一个注册的需要,用户在用户中心点击注册按钮后,跳转到注册页面,但是我们知道,注册是需要分几个步骤完成的:

假设注册需要分上面的三个步骤,那么当用户在第二个步骤或者第三个步骤的时候,突然不想注册,于是点击左上角的返回,是希望返回到用户中心,而不是上一个注册步骤,此时,仅仅依靠前面的路由跳转是不能实现的,而是要借助flutter的路由替换功能。

    

首先是在用户中心页面,点击注册按钮,跳转到registerFirst 的页面。

然后在registerFirst 的页面,输入手机号以后,点击下一步,跳转到registerSecond的页面。

这个时候在registerSecond的页面,点右上角的返回,退出注册时,就会返回到registerFirst 的页面,如果我们此时想要返回到用户中心页面的话,就需要在registerFirst 的页面,使用路由替换来进行页面跳转,因为registerFirst 页面的上一级就是用户中心,当使用registerSecond页面替换registerFirst 页面的时候,registerSecond页面的上一级就是用户中心页面了。

返回根路由

比如我们从用户中心跳转到 registerFirst 页面,然后从 registerFirst 页面跳转到 registerSecond页面,然后从 registerSecond 跳转到了 registerThird 页面。这个时候我们想的是 registerThird注册成功后返回到用户中心。 继续采用上面的逻辑的话,就是在 registerSecond 跳转到了 registerThird 页面时,继续使用路由替换,这样,当在registerThird注册成功后,使用返回上一级的方式,就可以直接返回到用户中心了。
但是,如果不采用路由替换的话,还有没有办法,直接一步返回到根目录呢,(是返回,而不是路由跳转),在其他的框架里面可能没有办法,但是在flutter中,有一个直接返回根路由的方法,只需要我们在registerThird页面,返回前先清空前面的路由,然后一步返回就可以了。

但是,此时还有一个新的问题,我们是从用户中心开始注册的,当注册完成后,是希望能直接回到注册中心,但是在上面的操作中,直接返回到了tab的第一页面,因此,还需要继续修改Tabs.dart页面:

然后在registerThird 页面返回根目录的时候,写入需要返回tab的索引就可以了:

代码下载:点这里(w033)

flutter中的路由跳转的更多相关文章

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

    原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...

  2. Flutter 中的路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航. 并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.po ...

  3. angular2 Router类中的路由跳转navigate

    navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...

  4. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  5. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  6. vue 如何实现在函数中触发路由跳转

    this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...

  7. Flutter中的普通路由与命名路由(Navigator组件)

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

  8. 16Flutter中的路由 基本路由 基本路由跳转传值(上)

    /* Flutter中的普通路由.普通路由传值.命名路由.命名路由传值 Flutter中的路由通俗的讲就是页面跳转.在Flutter中通过Navigator组件管理路由导航. 并提供了管理堆栈的方法. ...

  9. Flutter 中的基本路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

随机推荐

  1. 《图解设计模式》读书笔记2-2 Factory Method模式

    目录 类图 代码 角色介绍 思想 类图 代码 //产品类,任意可"use"的产品都可继承该类 public abstract class Product { public abst ...

  2. 百度地图api设置点的自定义图标不显示

    百度地图api设置点的设置代码为: var myIcon = new BMap.Icon(): 所以首先要找到这行代码,并在括号中加上图片信息: var myIcon = new BMap.Icon( ...

  3. Linux运维工程师需掌握的技能

    笔者是运维工程师,对Linux方面有点心得,现在说一下需要掌握哪方面的工具吧.说到工具,在行外可以说是技能,在行内我们一般称之为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没有 ...

  4. 解决Sql Server服务远程过程调用失败

    方法一:修复Sql Server: 修复过程中若遇到:重新启动计算机失败, 1.按下组合键[Win]+[R],调出运行窗口 2.输入“regedit”,在注册表左侧目录栏中找到如下位置:“HKEY_L ...

  5. [Linux] 024 IP 地址配置和网络 yum 源

    1. IP 地址配置 (1) 使用 setup 工具 $ setup ps setup 是 RedHat 系列的功能:一般地,Debian系列没有这个功能 Xubuntu 没有这个功能 (2) 启动网 ...

  6. MFC---导出 Excel 方法

    本方法通过Excel驱动写入 请添加头文件 #include"afxdb.h" 第一步创建Excel文件 安装驱动 CString FileName = L"first. ...

  7. Spring之AOP简单demo

    1.加入JAR包.出了Spring自身的Jar包还要一些依赖的JAR包.不然会报ClassNotFound. Student.java package com.lubby.bean; import o ...

  8. git stash 后"本地代码不见了"

    git stash 当本地代码不想提交覆盖,又忙于其他分支,可以先储存起来. git stash命令的作用就是将目前还不想提交的但是已经修改的内容进行保存至堆栈中,后续可以在某个分支上恢复出堆栈中的内 ...

  9. MySQL查询时报错Illegal mix of collations

    开发十年,就只剩下这套架构体系了! >>>   1.具体场景 两张表分别为: CREATE TABLE `tb_user` ( `id` bigint(20) NOT NULL AU ...

  10. vue.js(6)--v-model

    v-model实现数据的双向绑定(简易计算器实例) 简易计算器实例 <!DOCTYPE html> <html lang="en"> <head> ...