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
0
投稿
猜你喜欢
- 背景:在Android中按照数据保存的方式,可以分为如下几种Content Provider (用的SQLite实现),SQLite,Sha
- 无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要
- 最近在看《.NET游戏编程入门经典 C#篇》 第一章介绍了如何制作俄罗斯方块,自己试了试按照书上的步骤,可算是完成了。于是写下这篇文章留作纪
- 本篇给大家详细讲解了MTKAndroid平台开发流程,大致分为44个步骤,我们把每个步骤的命令详细讲解了下,一起来学习下。1.拷贝代码仓库从
- 在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据
- 本文介绍了Spring Boot Admin监控服务上下线邮件通知,分享给大家,具体如下:微服务架构下,服务的数量少则几十,多则上百,对服务
- 一个是新浪微博,腾讯微博的分享按钮,一个是他们的绑定情况(其实就是是否授权)。点击微博分享中新浪或腾讯按钮,就进行相应的授权(若没授权),显
- 说到多渠道,这里不得不提一下友盟统计,友盟统计是大家日常开发中常用的渠道统计工具,而我们的打包方法就是基于友盟统计实施的。按照友盟官方文档说
- 1、volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)&nb
- 您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序、电影应用程序和体育相关的应用程序。您是否想知道如何将视频内容添加到您的
- AlertDialog可以在当前的界面上显示一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertD
- 本文实例为大家分享了C#超市收银系统设计的具体代码,供大家参考,具体内容如下1.登录界面代码如下:using System;using Sy
- 本文实例为大家分享了Struts2框架拦截 器实例的示例代码,供大家参考,具体内容如下在看拦截 器的小例子的前我们先来看看sturts2的原
- 最近在做上传文件的服务,简单看了网上的教程。结合实践共享出代码。由于网上的大多数没有服务端的代码,这可不行呀,没服务端怎么调试呢。Ok,先上
- 第一种方法:string s=abcdeabcdeabcde;string[] sArray=s.Split(c) ;foreach(str
- 什么是队列结构一种线性结构,具有特殊的运算法则【只能在一端(队头)删除,在另一端(队尾)插入】。分类:顺序队列结构链式队列结构基本操作:入队
- 需求: 给定一个URL地址, 例如: http://www.cncounter.com/tools/shorturl.php, 解析对应的I
- 使用AS创建ADIL文件时AS会在main文件夹下给我们生成一个aidl文件夹和一个相同包名的包,通常我们会把所有和ADIL相关的类或文件放
- 本文实例讲述了C#启动进程的几种常用方法。分享给大家供大家参考。具体如下:1.启动子进程,不等待子进程结束private void simp
- Lambda 表达式Lambda 表达式是现代 C++ 中最重要的特性之一,而 Lambda 表达式,实际上就是提供了一个类似匿名函数的特性