Flutter 使用fluro的转场动画进行页面切换
作者:岛上码农 发布时间:2023-06-17 11:49:26
标签:Flutter,fluro,转场动画,页面切换
在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式。本篇演示了fluro 内置的转场动画,效果如下图所示。
转场形式
fluro 的转场形式通过 TransitionType枚举定义,如下所示:
enum TransitionType {
native, //原生形式,和原生的保持一致,默认
nativeModal, //原生模态跳转
inFromLeft, //从左滑入
inFromTop, //从顶部滑入
inFromRight, //从右滑入
inFromBottom,//从底部滑入
fadeIn, //渐现
custom, //自定义,需要配合 transitionBuilder 使用
material, //安卓风格跳转
materialFullScreenDialog, //安卓风格全屏对话框(左上角带有关闭按钮)
cupertino, //iOS 风格跳转
cupertinoFullScreenDialog,//iOS风格全屏对话框(左上角带有关闭按钮)
none, //无转场动画
}
设定页面默认转场方式
在定义 Handler 时,可以指定转场动画的 transition,如下所示:
//...
router.define(transitionPath,
handler: transitionHandler,
transitionType: TransitionType.inFromBottom);
//...
这个时候,如果在 navigateTo 方法没有指定转场动画,则会使用路由预先定义的方式进行转场。
跳转时指定转场方式
FluroRouter 的 navigateTo 方法可以显示指定 转场动画类型,只需要在 transition 参数指定对应的枚举值即可,示例代码如下:
RouterManager.router.navigateTo(
context, RouterManager.transitionPath,
transition: TransitionType.inFromRight);
如果想要控制转场动画的时间,可以设置transitionDuration参数,transitionDuration是一个 Duration 对象。考虑用户等待时间和体验,一般转场动画建议在200-300毫秒之间。示例代码如下:
RouterManager.router.navigateTo(
context, RouterManager.transitionPath,
transition: TransitionType.fadeIn,
transitionDuration: Duration(milliseconds: 1000));
总结
可以看到,fluro 自身提供的预设动画已经能够满足绝大多数场景的使用了,建议是如果页面的出现形式是固定的,可以在定义路由时指定,从而避免每一处跳转都需要设定 transition 参数。如果还需要其他转场动画,可以使用 transitionBuilder 来构建,下一篇我们介绍如何构建自定义的转场动画。
来源:https://juejin.cn/post/6974755803601305637
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 用java实现循环队列的方法:1、添加一个属性size用来记录眼下的元素个数。目的是当head=rear的时候。通过size=0还是size
- jmap命令可以打印java进程的JVM堆信息,今天在某台机器上运行该命令查看 19560进程的堆信息jmap -heap 19560出现以
- SUM映射问题当我们根据类别进行统计,返回的数据类型为HashMap<String,Object>,获取数值类型,容易报java
- 在Android系统上开发游戏是Android开发学习者所向往的,有成就感也有乐趣,还能取得经济上的报酬。那怎样开发Androi
- 程序调用自身的编程技巧称为递归( recursion)。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间
- 这篇文章主要介绍了spring boot2X Consul如何使用Feign实现服务调用,文中通过示例代码介绍的非常详细,对大家的学习或者工
- 1.PDF文件简介PDF是可移植文档格式,是一种电子文件格式,具有许多其他电子文档格式无法相比的优点。PDF文件格式可以将文字、字型、格式、
- 比较适合新手。逻辑上仍然有点问题。可以用于学习java文件操作下载地址:http://yun.baidu.com/share/link?sh
- 通常在C#的实际开发过程中,会发现设置其属性ScriptErrorsSuppressed无法达到屏蔽脚本错误效果,但是可以通过下面两种方式实
- Windows10 上的JDK安装配置1、前往 JDK 官网下载对应 jdk 版本安装包:下载地址本文以 jdk-8u161-windows
- 引言上一节讲了列表和长按事件autojs模仿QQ长按弹窗菜单弹窗菜单由粗到细, 自顶向下的写代码我们现在要修改的文件是showMenuWin
- 在Android中要让一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一
- 之前我在SpringBoot老鸟系列中专门花了大量的篇幅详细介绍如何集成Swagger,以及如何对Swagger进行扩展让其支持接口参数分组
- C#的System.Collections命名空间包含可使用的集合类和相关的接口,提供了集合的基本功能。包括了.NET下的非泛型集合类以及非
- 观察者模式是软件设计模式中的一种,使用也比较普遍,尤其是在GUI编程中。关于设计模式的文章,网络上写的都比较多,而且很多文章写的也不错,虽然
- 近期在开发中遇到一种需求:根据用户的权限决定是否显示某操作按钮。例如:若用户拥有删除数据的权限,则在界面中显示“删除”按钮;若用户无该权限,
- 一.EventBus概述 1.EventBus的三要素EventBus有三个主要的元素需要我们先了解一下:Event:事件,可以是任意类型的
- 马云说:“未来最大的资源就是数据,不参与大数据十年后一定会后悔。”毕竟出自wuli马大大之口,今年二月份我开始了学习大数据的道路,直到现在对
- 1.前言任何系统,我们不会傻傻的在每一个地方进行异常捕获和处理,整个系统一般我们会在一个的地方统一进行异常处理,spring boot全局异
- 简述SpringBoot对Spring的的使用做了全面的封装,使用SpringBoot大大加快了开发进程,但是如果不了解Spring的特性,