Flutter路由的跳转、动画和传参详解（最简单）
路由
做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent或者ViewController，再通过startActivity或者pushViewController来推出一个新的页面，不能跟web一样，直接丢一个链接地址就跳转到新的页面。当然，可以自己去加一个中间层来实现这些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。
Flutter路由介绍
Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。我们暂时把它们规为静态路由和动态路由。
跳转
命名路由
在文件构建时先设置路由参数：
newMaterialApp(
//代码
routes:{
"secondPage":(BuildContextcontext)=>newSecondPage(),
},
);
在需要做路由跳转的时候直接使用：
Navigator.pushNamed(context,"secondPage");
构建路由
Navigator.push(context,newMaterialPageRoute(builder:(BuildContextcontext){
returnnewSecondPage();
}))
区别
以上两种路由的优缺点十分明显：
- 命名路由简明并且系统，但是不能传参。
- 构建路由可以传参，但比较繁琐。
动画
构建动画
先在构建一个动画效果，如：
staticSlideTransitioncreateTransition( Animationanimation,Widgetchild){ returnnewSlideTransition( position:newTween ( begin:constOffset(1.0,0.0), end:constOffset(0.0,0.0), ).animate(animation), child:child, ); }
以上动画意思为跳转时新页面从右边划入，返回时向右边划出。
引入动画
Navigator.push( context, newPageRouteBuilder(pageBuilder:(BuildContextcontext, Animation animation, Animation secondaryAnimation){ //跳转的路由对象 returnnewWechat(); },transitionsBuilder:( BuildContextcontext, Animation animation, Animation secondaryAnimation, Widgetchild, ){ returnMyStatefulWidgetState .createTransition(animation,child); }))
传参
跳转时
传
前面我们说过，flutter的命名路由跳转无法传参。因此，我们只能使用构建路由的方式传参:
Navigator.push(context,newMaterialPageRoute(builder:(BuildContextcontext){
returnnewSecondPage(
title:'此处为参数'，
name:'此处为名字参数'
);
}))
收
classSecondPageextendsStatefulWidget{
Stringtitle;
Stringname;
Wechat({
Keykey,
this.title,
this.name
}):super(key:key);
@override
StatecreateState(){
returnnewMyStatefulWidgetState();
}
}
返回时
传
当触发路由返回的事件时，传参是十分简单的。和跳转时的方式一样，甚至更简单，只需要：
Navigator.of(context).pop('这个是要返回给上一个页面的数据');
收
但是，在接受返回时的数据需要改造前面触发跳转时的路由：
//命名路由 Navigator.pushNamed(context,"ThirdPage").then((Stringvalue){ //处理代码 }); //构建路由 Navigator.push (context,newMaterialPageRoute(builder:(BuildContextcontext){ returnnewThirdPage(title:"请输入昵称"); })).then((Stringresult){ //处理代码 });
以上就是Flutter路由的跳转、动画以及传参的相关方法，依葫芦画瓢即可轻松应对。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。