内容简介:路由是native中应用的比较多,特别是组件化的工程中,更是用来解耦的利器,比较常用的有阿里的ARouter等,路由这一思想也是借鉴前端而来,比如web中页面跳转就是一个url就到了一个新的页面,Flutter既然是新一代的跨端方案,而且从RN借鉴了不少思想,路由当然也是必不可少的,本篇将了解下Flutter的路由同步更新gitpage在Flutter中支持所有路由场景,
路由是native中应用的比较多,特别是组件化的工程中,更是用来解耦的利器,比较常用的有阿里的ARouter等,路由这一思想也是借鉴前端而来,比如web中页面跳转就是一个url就到了一个新的页面,Flutter既然是新一代的跨端方案,而且从RN借鉴了不少思想,路由当然也是必不可少的,本篇将了解下Flutter的路由
同步更新gitpage xsfelvis.github.io/2018/12/15/…
Flutter的路由
在Flutter中支持所有路由场景, push、pop页面,页面间的参数传递等等。flutter里面的路由可以分成两种,
- 一种是直接注册,不能传递参数,可以称 为静态路由
- 一种要自己构造实例,可以传递参数,可以称为 动态路由。
静态路由
在 创建时就已经明确知道了要跳转的页面和值, 在新建一个MD风格的App的时候,可以传入一个routes参数来定义路由。但是这里定义的路由是静态的,它不可以向下一个页面传递参数
@override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), //注册路由表 routes: { "router/static_page": (context) => StaticRoute(), }, home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } 复制代码
通过routes这个属性注册好跳转的页面即key-value,上面的代码中
key:router/static_page value: StaticRouter 然后使用的时候使用
FlatButton( child: Text("open static router"), textColor: Colors.blue, onPressed: () { Navigator.pushNamed(context, "router/static_page"); }, ) 复制代码
动态路由
当需要向下一个页面传递参数时,要用到所谓的动态路由,自己生成页面对象,所以可以传递自己想要的参数。
FlatButton( child: Text("open dynamic router"), textColor: Colors.blue, onPressed: () { Navigator.push(context, MaterialPageRoute( builder: (context) { return new EchoRoute("传入跳转参数"); })); 或者 Navigator.of((context).push(MaterialPageRoute( builder: (context) { return new EchoRoute("传入跳转参数"); })); }, ) 复制代码
点击返回
new RaisedButton( child: new Text("点我返回"), onPressed: () { Navigator.of(context).pop(); }, color: Colors.blue, highlightColor: Colors.lightBlue, ) 复制代码
我们可以在前一个页面接受第二个页面的返回值 在第一个页面跳转时候加上futrue来接收
FlatButton( child: Text("open dynamic router"), textColor: Colors.blue, onPressed: () { Future future = Navigator.push(context, MaterialPageRoute(builder: (context) { return new EchoRoute("传入跳转参数"); })); //接收动态页面返回时传回的值 future.then((value) { showDialog( context: context, child: new AlertDialog( title: new Text(value), )); }); }, 复制代码
在EchoRoute页面 返回时使用带参数的pop方法
new RaisedButton( child: new Text("点我返回"), onPressed: () { // Navigator.of(context).pop(); Navigator.of(context).pop("我是来自dymamic 关闭的返回值"); }, color: Colors.blue, highlightColor: Colors.lightBlue, ) 复制代码
这样就会在关闭EchoRoute回到跳转前页面时弹出dialog收到EchoRoute传来的参数
小结
Navigator的职责是负责管理Route的,管理方式就是利用一个栈不停压入弹出,当然也可以直接替换其中某一个Route。而Route作为一个管理单元,主要负责创建对应的界面,响应Navigator压入路由和弹出路由
入栈:
- 使用Navigator.of(context).pushName(“path“)或者Navigator.pushName(context,“path“)可以进行静态路由的跳转前提是需要在route属性里面注册
- 使用push(Route)可以进行态路由的跳转,动态路由可以传入未知数据
出栈
- 使用pop()可以进行路由的出栈并且可以传递参数
- 可以使用Future接收上个页面返回的值。
以上所述就是小编给大家介绍的《Flutter中的路由》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- vue路由篇(动态路由、路由嵌套)
- 小程序封装路由文件和路由方法,5种路由方法全解析
- Vue的路由及路由钩子函数
- gin 源码阅读(二)-- 路由和路由组
- vue router 路由鉴权(非动态路由)
- Flutter进阶:路由、路由栈详解及案例分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
世界因你不同:李开复自传(纪念版)
李开复,范海涛 著作 / 中信出版社 / 2015-7-10 / 39.00
编辑推荐 1.李开复唯一一部描写全面生平事迹的传记:《世界因你不同:李开复自传》书中讲述了家庭教育培育的“天才少年”;学校教育塑造的“创新青年”,走入世界顶级大公司,苹果、微软、谷歌等亲历的风云内幕,岁月30载不懈奋斗、追求事业成功的辉煌历程。 2.娓娓道来、字字珠玑、可读性和故事性皆佳。李开复博士是青少年成长成才的励志偶像,年轻家长、学校教师阅读后也能从中得到感悟和启发。 3.......一起来看看 《世界因你不同:李开复自传(纪念版)》 这本书的介绍吧!