fluro
的页面切换函数 Router.navigateTo
反对11
种不同成果的切换动画,反对延时设置和自定义切换成果,上面将会对所有的成果展现进去,不便当前能够依据理论需要进行抉择。
切换成果分类
fluro内置的切换动画能够分为3类:
- 各平台原生成果
- 非原生成果
- 自定义成果
Router.navigateTo( context path transition transitionBuilder transitionDuration)
上一篇文章,曾经介绍过Flutter
的路由治理和Fluro
的应用了,咱们曾经晓得 Router.navigateTo
函数。
只有批改transition
则能够实现不同的切换成果,transitionBuilder
用于自定义切换成果,transitionDuration
为切换动画所需工夫的设置。
1. 各平台原生成果
这里的平台只针对android和ios,在上一篇文章中曾经介绍过,应用零碎默认的路由管理系统进行页面跳转的时候,flutter会依据所在平台执行不同的切换成果,在安卓中是从下到上的渐显,而ios是从右向左的滑入。
在fluro
中,原生成果分为三种,每种类型都成对呈现:
- 随平台应用成果:
TransitionType.native
和TransitionType.nativeModal
- 应用安卓的成果:
TransitionType.material
和TransitionType.materialFullScreenDialog
- 应用ios的成果:
TransitionType.cupertino
和TransitionType.cupertinoFullScreenDialog
每个成果都成对呈现,因为Flutter
中的原生路由切换成果分为非全屏和全屏。
在Material
和Cupertino
中,全屏成果的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切换);...
查看更多,请关注: