300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Flutter Fluro路由库的页面切换动画效果

Flutter Fluro路由库的页面切换动画效果

时间:2019-05-11 11:42:25

相关推荐

Flutter Fluro路由库的页面切换动画效果

fluro的页面切换函数Router.navigateTo支持11种不同效果的切换动画,支持延时设置和自定义切换效果,下面将会对所有的效果展示出来,方便以后可以根据实际需求进行选择。

切换效果分类

fluro内置的切换动画可以分为3类:

各平台原生效果非原生效果自定义效果

Router.navigateTo(contextpathtransitiontransitionBuildertransitionDuration)

上一篇文章,已经介绍过Flutter的路由管理和Fluro的使用了,我们已经知道Router.navigateTo函数。 只要修改transition则可以实现不同的切换效果,transitionBuilder用于自定义切换效果,transitionDuration为切换动画所需时间的设置。

1. 各平台原生效果

这里的平台只针对android和ios,在上一篇文章中已经介绍过,使用系统默认的路由管理系统进行页面跳转的时候,flutter会根据所在平台执行不同的切换效果,在安卓中是从下到上的渐显,而ios是从右向左的滑入。

fluro中,原生效果分为三种,每种类型都成对出现:

随平台使用效果:TransitionType.nativeTransitionType.nativeModal使用安卓的效果:TransitionType.materialTransitionType.materialFullScreenDialog使用ios的效果:TransitionType.cupertinoTransitionType.cupertinoFullScreenDialog

每个效果都成对出现,因为Flutter中的原生路由切换效果分为非全屏和全屏。

MaterialCupertino中,全屏效果的AppBar左侧是关闭按钮而不是后退按钮。

在iOS上,全屏效果不再是向左滑入,变成了从下往上移入,而且不能用向右滑动的手势关闭页面了。

需要注意的是,以上6中原生的切换效果并不支持transitionDuration自定义切换时间,均采用和原生一致的效果。

2. 非原生效果

fluro也内置了4种常见的效果,这4个效果都是支持transitionDuration自定义切换时间。

渐显:TransitionType.fadeIn

从左向右进入:TransitionType.inFromLeft

从右向左进入:TransitionType.inFromRight从下向上进入:TransitionType.inFromBottom

3. 自定义效果

除了以上10种效果外,还有一个特殊的自定义效果,TransitionType.custom

它必须搭配transitionBuilder参数。

自定义效果也支持使用transitionDuration自定义切换时间。

下面就是一个自定义的渐隐渐显效果示例:

...Router.navigateTo(context,path,transition: TransitionType.custom,transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {return FadeTransition(opacity: CurvedAnimation(parent: animation,curve: Curves.linear,),child: child);},transitionDuration: Duration(seconds: 1), // 需要1s切换);...复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。