第一点: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<dynamic> 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中即可得到返回的数据。

好啦 小伙伴们,今天就先说这么多,,后续我也会保持用法的不断更新,可以点下关注,以便及时得到更新通知哦。哈哈!
作为刚入坑Flutter的我而言,有些说的可能也存在错误,欢迎批评指正!

链接:https://www.jianshu.com/p/44650be76110

Flutter路由导航Navigator的更多相关文章

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

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

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

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

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

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

  4. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  7. Vue-初步了解vue-router的三要素:路由map 、路由视图、路由导航

    安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...

  8. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  9. Flutter路由_fluro引入配置和使用

    Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter ...

随机推荐

  1. 《Unity3D/2D游戏开发从0到1》正式出版发行

    <Unity3D/2D游戏开发从0到1>正式出版发行 去年个人编写的Unity书籍正式在2015年7月正式发行,现在补充介绍一下个人著作.书籍信息:      书籍的名称: <Uni ...

  2. 让你的ASP.NET Core应用程序更安全

    让你的ASP.NET Core应用程序更安全 对于ASP.NET Core应用程序,除了提供认证和授权机制来保证服务的安全性,还需要考虑下面的一些安全因素: CSRF 强制HTTPS 安全的HTTP ...

  3. 流水车间调度算法分析的简单+Leapms实践--混合整数规划的启发式建模

    流水车间调度算法分析的简单+Leapms实践--混合整数规划的启发式建模 清华大学出版社出版的白丹宇教授著作<流水车间与开放车间调度算法渐近分析>采用渐近分析方法分析多个NP-难类启发调度 ...

  4. python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍

    目录 python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍 一丶元祖 1.元祖简介 2.元祖变量的定义 3.元祖变量的常用操作. 4.元祖的遍历 5.元祖的应用场景 p ...

  5. .NET CAD二次开发学习第一天

    基于浩辰CAD2019 需求: 开发线转圆简单命令.命令过程:1) 请选择图中直线(要求支持一次选多个):2) 弹出对话框,输入圆的图层名和半径3) 点对话框中确定按钮,结束命令.命令执行效果:所选每 ...

  6. pdf.js 使用实例

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...

  7. 一文搞定MySQL的事务和隔离级别

    一.事务简介 事务是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成. 一个数据库事务通常包含了一个序列的对数据库的读/写操作.它的存在包含有以下两个目的: 为数据库操作序列提供 ...

  8. 【Redis】redis各类型数据存储分析

    一.简介和应用 Redis是一个由ANSI C语言编写,性能优秀.支持网络.可持久化的K-K内存数据库,并提供多种语言的API.它常用的类型主要是 String.List.Hash.Set.ZSet ...

  9. phpstorm 代码注释后,撤销某段代码的注释的,快捷键是什么?

    phpstorm 的代码注释有两种风格,一种是双斜杠,另一种是 /* ...  */风格,两者的快捷键都是开关式(即按第一次为注释,再按一次为撤销注释),快捷键如下: 1.双斜杠注释   Ctrl + ...

  10. 【20190220】HTTP-知识点整理:TCP/IP与HTTP

    TCP/IP是互联网相关的各类协议族的总称,HTTP属于它内部的一个子集. 一.TCP/TP的分层管理 1. 应用层 应用层决定了向用户提供应用服务时通信的活动.TCP/IP 协议族内预存了各类通用的 ...