第一点:push使用

1.pushNamed——Navigator.of(context).pushNamed('routeName');

此种方法只是简单的将我们需要进入的页面push到栈顶,以此来显示当前页面,其参数是一个字符串类型,传入的是页面对应的路由名称 该路由名称需要在程序主入口中进行定义。定义方法为:

void main() {
runApp(
new MaterialApp(
home: new Screen1(),
routes: <String, WidgetBuilder> {
'/screen1': (BuildContext context) => new Screen1(),
'/screen2' : (BuildContext context) => new Screen2(),
'/screen3' : (BuildContext context) => new Screen3(),
},
)
);
}

使用:Navigator.of(context).pushNamed('/screen1'); 直接进入screen1页面(每次都将新建一个新的页面)

2.1 pushReplacementNamed——Navigator.of(context).pushReplacementNamed('/screen4');

指把当前页面在栈中的位置替换成跳转的页面(替换导航器的当前路由,通过推送路由[routeName]),当新的页面进入后,之前的页面将执行dispose方法。 下面为官方说明:

Replace the current route of the navigator that most tightly encloses the
given context by pushing the route named [routeName] and then disposing
the previous route once the new route has finished animating in.

即比如当前从页面1进入页面2,在页面2使用 Navigator.of(context).pushReplacementNamed('/screen3');进入页面3,当进入了页面3后,页面2将执行dispose方法,此时在页面3返回时,会回到页面1.

使用情况:例如 从SplashScreen到HomeScreen。它应该只显示一次,用户不应该再从主屏幕回到它。在这种情况下,由于我们将要进入一个全新的屏幕, 我们可能想要使用这个方法来实现它的enter animation属性。

2.2  pushReplacement——Navigator.pushReplacement( context, MaterialPageRoute(builder: (BuildContext context) => screen4()));

这个用法跟2.1相同,只是路由的传递有差别,上方的是传递路由名称(页面对应的名称,需在入口定义(本文第一点)),而后者只需new对应页面即可,而且可以传递 参数(传参方式类似于本文后续所说的传递方法)。

3.popAndPushNamed——Navigator.popAndPushNamed(context, '/screen4');

指将当前页面pop,然后跳转到制定页面(将当前路由弹出导航器,并将命名路由推到它的位置。) 下面为官方说明:

Pop the current route off the navigator that most tightly encloses the
given context and push a named route in its place.

使用情况:例如 在购物应用中,有产品列表,用户在产品列表中可以通过筛选,来进一步选择商品,在这个过程中,用户点击筛选按钮时,会进入筛选条件选择界面,当用户点击 确定筛选按钮时,应弹出筛选界面,并使用新的筛选条件进入产品列表。这种情况popAndPushNamed就更合适了。

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

指将制定的页面加入到路由中,然后将其他所有的页面全部pop, (Route route) => false将确保删除推送路线之前的所有路线。 这时候将打开一个新的screen4页面

Push the route with the given name onto the navigator, and then remove all
the previous routes until the `predicate` returns true.

使用情况:例如 当用户点击了退出登录时,我们需要进入某一个页面(比如点退出登录后进入了登录页),这个时候用户点击返回时不应该能进入任何一个页面,这种情况就可以使用。

5.1 pushNamedAndRemoveUntil——Navigator.of(context).pushNamedAndRemoveUntil('/screen4', ModalRoute.withName('/screen1'));

指将制定的页面加入到路由中,然后将之前的路径移除知道制定的页面为止(将具有给定名称的路由推到导航器上,然后删除所有路径前面的路由直到'predicate'返回true为止。) 这时候将销毁栈内除了screen4的页面,点击直接去栈内screen4,这时screen4会重新build

Push the route with the given name onto the navigator, and then remove all
the previous routes until the `predicate` returns true.

使用情况:例如 一个购物应用程序的例子!或者任何需要支付交易的应用程序。因此,在这些应用程序中,一旦用户完成了支付事件,所有与交易或购物车相关的屏幕都应该从堆栈中删除,用户应该进入到支付确认页面。单击back按钮应将它们返回到产品列表或主屏幕。 使用实例: 1-->2-->3,3到4时使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/screen1')); 这时候如果在页面4点击返回,将会直接退出程序。 1-->2-->3,3到4时使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/')); 这时候如果在页面4点击返回,将会直接回到页面1。 1-->2-->1-->2-->3,3到4时使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/screen1')); 这时候如果在页面4点击返回,将会回到第二个1页面。

5.2

  Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (BuildContext context) => new screen4()),
ModalRoute.withName('/'),

这种方法跟上述方法作用相同,不同之处在于,上述传递的是路由名称,这个名称需要你在入口处进行路由指定,而这种则无需指定,直接new 出来即可, 而且可以传递参数。(看其名称即可发现差别pushNamedAndRemoveUntil与pushAndRemoveUntil)使用这种作用如下 1-->2-->3,3到4时使用此方法,这时候如果在页面4点击返回,将会直接回到页面1。

如果使用

Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (BuildContext context) => Screen4()),
(Route<dynamic> route) => false,
);

这时候进入4后。4将成为唯一的一个页面。其他页面都将pop出栈,这个跟上述pushNamedAndRemoveUntil也一致。

6.popUntil——Navigator.popUntil(context, ModalRoute.withName('/screen2'));

有些应用场景下,用户可能不得不填写一个由三部分组成的长表单,该表单可能在移动应用程序的三个连续屏幕中显示。现在在表单的第三个页面,用户决定取消填写表单。用户单击Cancel,就会弹出所有之前的与表单相关的屏幕,并将用户带回主屏幕,从而丢失所有与表单相关的数据(在这种情况下,这是我们想要的)。我们不会在这里推出任何新东西,只是回到以前的路线。

第二点 pop

1.Navigator.of(context).maybePop();

maybePop 会自动进行判断,如果当前页面pop后,会显示其他页面,不会出现问题,则将执行当前页面的pop操作 否则将不执行。

2.Navigator.of(context).canPop();
canPop  判断当前页面能否进行pop操作,并返回bool值
3.Navigator.of(context).pop();
直接退出当前页面

第三点 传参和参数返回

传参的方式很简单,在需要接收参数的页面进行参数定义,并加入其构造函数中,在跳转到该页面时,使用MaterialPageRoute并在页面中传入参数即可。

String params;
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new mainPage(params)));
接收参数
class mainPage extends StatelessWidget {
final String userName;
mainPage(this.userName);
@override
Widget build(BuildContext context) {
print(userName);
}

带返回值的页面跳转:

String userName = "yinll";
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) =>
new Screen5(userName))).then((data){
result =data;
print(result);
});

然后screen5中,在返回时使用:Navigator.of(context).pop('这是页面5返回的参数'); 在pop中写上返回的的值,这时候在上方的then中即可得到返回的数据。

原文:https://juejin.im/post/5be2d6546fb9a049be5cf6d5

Flutter路由管理的更多相关文章

  1. 6.2.初识Flutter应用之路由管理

    路由管理 路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewC ...

  2. flutter最简单轻量便捷的路由管理方案NavRouter

    大家好,我是CrazyQ1,今天给大家推荐一个路由管理方案,用的非常不错的,叫nav_router. 项目地址是:https://github.com/fluttercandies/nav_route ...

  3. Flutter 应用入门:路由管理

    路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewContro ...

  4. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  5. Springcloud Gateway 路由管理

    Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开 ...

  6. Flutter路由的跳转、动画与传参(最简单)

    跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...

  7. Flutter路由跳转及参数传递

    本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者 ...

  8. vue路由管理-保留滚动位置功能、按需加载模块名自定义

    路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...

  9. 谈谈后台服务的RPC和路由管理

    版权声明:本文由廖念波原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/147 来源:腾云阁 https://www.qclo ...

随机推荐

  1. bs4 解析 以及用法

    bs4解析 bs4: 环境安装: lxml bs4 bs4编码流程: 1.实例化一个bs4对象,且将页面源码数据加载到该对象中 2.bs相关的方法或者属性实现标签定位 3.取文本或者取属性 bs的属性 ...

  2. 15.selenium_case04

    # 用selenium实现一个头条号的模拟发文接口 import time import redis from selenium import webdriver from selenium.webd ...

  3. ORM-面向对象&关系数据库

    ORM-面向对象&关系数据库 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程 ...

  4. VS2015中配置Eigen

    Eigen非常方便矩阵操作,当然它的功能不止如此.矩阵操作在算法研究过程中,非常重要,例如在图像处理中二维高斯拟合求取光斑中心时使用Eigen提供的矩阵算法,差不多十来行代码即可实现. 1)下载Eig ...

  5. django一般架构思维导图

    本例已django项目名称为myblog,其下面有2个应用blog和comment介绍:

  6. vue 2.0多页面开发

    1.为项目添加多个入口 找到\build\webpack.base.conf.js文件: module.exports = { //..., //vue的多页面开发:应用程序可以存在多个入口 entr ...

  7. 无预挖无ICO-潜力币XDAG最强攻略

    更新下XDAG上交易所了,当时看好这个币才推荐的,那时场外才2毛不到,现在涨到9毛一个了... https://www.coinbat.com/trade/panel/xdag... VBitEX [ ...

  8. Java和.NET(C#)的开发用到的技术对比总结

    前言 声明:我指的是一般的Java和.NET(C#)的后台开发用到的技术总结 最近一直在应聘ing,楼主的项目还是.NET(C#)项目居多,Java项目相对少,在这也吐槽下,招.NET(C#)的公司实 ...

  9. 分享vs低版本开发的项目到VS高版本时遇到的4个小问题解决之记录

    分享vs低版本开发的项目到VS高版本时遇到的4个小问题解决之记录 原文首发: http://anforen.com/wp/2017/08/extensionattribute_compilerserv ...

  10. python--迭代器(Iterator)

    博客地址:http://www.cnblogs.com/yudanqu/ 1.可迭代对象 在介绍迭代器之前呢,我们先聊一下可迭代对象(Iterable),可迭代对象就是可以直接作用于for循环的对象. ...