这篇文章主要为大家展示了“Flutter路由中跳转、动画和传参的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Flutter路由中跳转、动画和传参的示例分析”这篇文章吧。
路由
做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路由中跳转、动画和传参的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
