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

所属分类: 软件编程 / Android 阅读数: 44
收藏 0 赞 0 分享

路由

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

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

更多精彩内容其他人还在看

使用ViewPager实现android软件使用向导功能实现步骤

现在的大部分android软件,都是使用说明,就是第一次使用该软件时,会出现向导,可以左右滑动,然后就进入应用的主界面了,下面我们就实现这个功能
收藏 0 赞 0 分享

android在异步任务中关闭Cursor的代码方法

android在异步任务中如何关闭Cursor?在我们开发应用的时候,很多时候会遇到这种问题,下面我们就看看代码如何实现
收藏 0 赞 0 分享

Android自定义桌面功能代码实现

android自定义桌面其实很简单,看一个例子就明白了
收藏 0 赞 0 分享

android将图片转换存到数据库再从数据库读取转换成图片实现代码

有时候我们想把图片存入到数据库中,尽管这不是一种明智的选择,但有时候还是不得以会用到,下面说说将图片转换成byte[]数组存入到数据库中去,并从数据库中取出来转换成图像显示出来
收藏 0 赞 0 分享

TextView显示系统时间(时钟功能带秒针变化

用System.currentTimeMillis()可以获取系统当前的时间,我们可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间,可以做一个时钟的功能
收藏 0 赞 0 分享

Android用ListView显示SDCard文件列表的小例子

本文简单实现了用ListView显示SDCard文件列表,目录的回退等功能暂不讨论,获取文件列表,files即为所选择目录下的所有文件列表
收藏 0 赞 0 分享

Android拦截外拨电话程序示例

这篇文章主要介绍了Android拦截外拨电话的示例,大家参考使用吧
收藏 0 赞 0 分享

通过Html网页调用本地安卓(android)app程序代码

如何使用html网页和本地app进行传递数据呢?经过研究,发现还是有方法的,总结了一下,大致有一下几种方式
收藏 0 赞 0 分享

android Textview文字监控(Textview使用方法)

以手机号充值为例,当用户输入最后一位数时候,进行汇率的变换,本文就实现类似这样的功能
收藏 0 赞 0 分享

Android ListView长按弹出菜单二种实现方式示例

这篇文章主要介绍了Android ListView长按弹出菜单的方法,大家参考实现
收藏 0 赞 0 分享
查看更多