Flutter路由的跳转、动画和传参详解(最简单)
程序员文章站
2022-04-12 11:25:47
路由
做android/ios原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个intent或者viewcontroller,再通过star...
路由
做android/ios原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个intent或者viewcontroller,再通过startactivity或者pushviewcontroller来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面。当然,可以自己去加一个中间层来实现这些功能。
flutter里面是原生支持路由的。flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。
flutter路由介绍
flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递等等。flutter里面的路由可以分成两种,一种是直接注册,不能传递参数。另一种要自己构造实例,可以传递参数。我们暂时把它们规为静态路由和动态路由。
跳转
命名路由
在文件构建时先设置路由参数:
new materialapp( // 代码 routes: { "secondpage":(buildcontext context)=>new secondpage(), }, );
在需要做路由跳转的时候直接使用:
navigator.pushnamed(context, "secondpage");
构建路由
navigator.push(context, new materialpageroute(builder: (buildcontext context){ return new secondpage(); }))
区别
以上两种路由的优缺点十分明显:
- 命名路由简明并且系统,但是不能传参。
- 构建路由可以传参,但比较繁琐。
动画
构建动画
先在构建一个动画效果,如:
static slidetransition createtransition( animation<double> animation, widget child) { return new slidetransition( position: new tween<offset>( begin: const offset(1.0, 0.0), end: const offset(0.0, 0.0), ).animate(animation), child: child, ); }
以上动画意思为跳转时新页面从右边划入,返回时向右边划出。
引入动画
navigator.push<string>( context, new pageroutebuilder(pagebuilder: (buildcontext context, animation<double> animation, animation<double> secondaryanimation) { // 跳转的路由对象 return new wechat(); }, transitionsbuilder: ( buildcontext context, animation<double> animation, animation<double> secondaryanimation, widget child, ) { return mystatefulwidgetstate .createtransition(animation, child); }))
传参
跳转时
传
前面我们说过,flutter的命名路由跳转无法传参。因此,我们只能使用构建路由的方式传参:
navigator.push(context, new materialpageroute(builder: (buildcontext context){ return new secondpage( title:'此处为参数', name:'此处为名字参数' ); }))
收
class secondpage extends statefulwidget { string title; string name; wechat({ key key, this.title, this.name }) : super(key: key); @override state<statefulwidget> createstate() { return new mystatefulwidgetstate(); } }
返回时
传
当触发路由返回的事件时,传参是十分简单的。和跳转时的方式一样,甚至更简单,只需要:
navigator.of(context).pop('这个是要返回给上一个页面的数据');
收
但是,在接受返回时的数据需要改造前面触发跳转时的路由:
// 命名路由 navigator.pushnamed<string>(context, "thirdpage").then( (string value){ //处理代码 }); // 构建路由 navigator.push<string>(context, new materialpageroute(builder: (buildcontext context){ return new thirdpage(title:"请输入昵称"); })).then( (string result){ //处理代码 });
以上就是flutter路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。