首页 > 系统 > Android > 正文

Flutter路由的跳转、动画和传参详解(最简单)

2019-10-21 21:30:42
字体:
来源:转载
供稿:网友

路由

做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路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。

总结

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


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表