内容简介:路由是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进阶:路由、路由栈详解及案例分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Design Accessible Web Sites
Jeremy Sydik / Pragmatic Bookshelf / 2007-11-05 / USD 34.95
It's not a one-browser web anymore. You need to reach audiences that use cell phones, PDAs, game consoles, or other "alternative" browsers, as well as users with disabilities. Legal requirements for a......一起来看看 《Design Accessible Web Sites》 这本书的介绍吧!