android跳转动画和ios,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 animation, Widget child) {

return new SlideTransition(

position: new Tween(

begin: const Offset(1.0, 0.0),

end: const Offset(0.0, 0.0),

).animate(animation),

child: child,

);

}

以上动画意思为跳转时新页面从右边划入，返回时向右边划出。

引入动画

Navigator.push(

context,

new PageRouteBuilder(pageBuilder: (BuildContext context,

Animation animation,

Animation secondaryAnimation) {

// 跳转的路由对象

return new Wechat();

}, transitionsBuilder: (

BuildContext context,

Animation animation,

Animation 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 createState() {

return new MyStatefulWidgetState();

}

}

返回时

传

当触发路由返回的事件时，传参是十分简单的。和跳转时的方式一样，甚至更简单，只需要：

Navigator.of(context).pop('这个是要返回给上一个页面的数据');

收

但是，在接受返回时的数据需要改造前面触发跳转时的路由：

// 命名路由

Navigator.pushNamed(context, "ThirdPage").then( (String value){

//处理代码

});

// 构建路由

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){

return new ThirdPage(title:"请输入昵称");

})).then( (String result){

//处理代码

});

以上就是Flutter路由的跳转、动画以及传参的相关方法，依葫芦画瓢即可轻松应对。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。