Flutter开发中的路由参数处理
Navigator 的 push 和 pop方法
Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递,其他变形的方法也一样。pushNamed 方法原型如下:
Future<T?> pushNamed<T extends Object?>( String routeName, { Object? arguments, }) { return push<T>(_routeNamed<T>(routeName, arguments: arguments)!); }
除了 routeName 的命名路由以外,还有个可选参数 arguments 用于在路由页面传递参数。pop 方法也一样:
void pop<T extends Object?>([ T? result ]) { //... }
可以携带一个 result 回传到上级页面。
代码实现
我们使用一个列表跳转到详情页来演示路由参数获取(列表构建文章请看//www.jb51.net/article/213052.htm)。点击列表行时携带列表数据项的 id 跳转到详情页。从详情页返回时再把该 id 回传。列表项的 Widget 新增了一个 id属性,由构建列表时初始化得到。
class DynamicItem extends StatelessWidget { final int id; final String title; final String imageUrl; final int viewCount; static const double ITEM_HEIGHT = 100; static const double TITLE_HEIGHT = 80; static const double MARGIN_SIZE = 10; const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount, {Key key}) : super(key: key); //... }
列表的容器使用 GestureDetector 包裹,以便响应点击事件。 onTap 方法定义为一个 async 方法,以便使用 await 获取导航返回时的参数,并使用一个 SnackBar 显示返回的 id。这里 pushNamed 携带了一个 Map 对象将列表的 id传递到详情页。
@override Widget build(BuildContext context) { return GestureDetector( child: Container( margin: EdgeInsets.all(MARGIN_SIZE), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ _imageWrapper(this.imageUrl), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _titleWrapper(context, this.title), _viewCountWrapper(this.viewCount.toString()), ], ), ) ], ), ), onTap: () async { Map<String, dynamic> routeParams = {'id': id}; var arguments = await Navigator.of(context) .pushNamed(RouterTable.dynamicDetail, arguments: routeParams); ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("从动态${(arguments as Map<String, dynamic>)['id']}返回"), )); }, ); }
这里还使用了一个 arguments变量 接收导航返回的参数,导航若有返回参数,会返回一个 Future 对象,使用 await 即可接收。然后在使用 as 转换为实际的类型进行使用。 在详情页中,Flutter 提供了一个ModalRoute的类从当前上下文获取路由配置参数,代码如下所示:
class DynamicDetail extends StatelessWidget { const DynamicDetail({Key key}) : super(key: key); @override Widget build(BuildContext context) { Map<String, dynamic> routeParams = ModalRoute.of(context).settings?.arguments; return WillPopScope( child: Scaffold( appBar: AppBar( title: Text('动态详情'), brightness: Brightness.dark, ), body: Center( child: Text("产品 id: ${routeParams['id']}"), ), ), onWillPop: () async { Navigator.of(context).pop({'id': routeParams['id']}); return true; }, ); } }
实际上这个ModalRoute.of(context).settings就是我们上一篇路由拦截中的onGenerateRoute的 settings 参数,因此假设我们需要增加额外的路由参数(例如全局参数),则可以在 onGenerateRoute 方法中重新组装路由参数。 这里有个地方需要注意,因为返回时要携带参数,因此我们需要拦截返回响应事件,这时候整个组件可以使用 WillPopScope 包裹,该方法带有两个参数:
- child:子组件,即原有的页面组件;
- onWillPop:返回前拦截处理,返回一个 Future<bool>对象,若为 false,则不会返回。若为 true,则返回上一级。这里我们调用了 携带参数的 pop 方法以便将参数回传。实际这里往往做一些其他处理,例如表单没有保存询问是否确认李可,还有广大电商的活动页询问你是“忍痛离开”或是“再看一会”的处理。
最终效果
最终运行效果如下图所示,详情页获取到了 id 参数,返回的时候也接收到了对应的 id。
以上就是Flutter开发中的路由参数处理的详细内容,更多关于Flutter 路由参数处理的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24
- 这篇文章主要介绍了解决vue-router路由拦截造成死循环问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-06-27
- 这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-04
- 这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
- 这篇文章主要介绍了springboot中nacos动态路由的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了vue路由分文件拆分管理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-13
- 这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统)
这篇文章主要介绍了原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统),需要的朋友可以参考下...2020-06-30Flutter悬浮按钮FloatingActionButton使用详解
本文主要介绍了Flutter悬浮按钮FloatingActionButton使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-07-12- 登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05
MVC默认路由实现分页(PagerExtend.dll下载)
这篇文章主要介绍了MVC默认路由实现分页,采用bootstrap的样式,文末提供了PagerExtend.dll下载地址,感兴趣的小伙伴们可以参考一下...2021-09-22Flutter 底部弹窗ModelBottomSheet的使用示例
在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。...2021-06-07- 在实际开发过程中,往往开始是完成功能层面的开发,然而再考虑组件封装和代码优化。当然,组件封装越早做越好,因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下...2017-01-09解读ASP.NET 5 & MVC6系列教程(11):Routing路由
这篇文章主要介绍了ASP.NET 5 Routing路由的用法,虽然ASP.NET 5 和MVC6的路由使用方式很简单,但是相关的使用规则却很复杂,大家使用的时候需要多加注意。...2021-09-22