fluro的页面切换函数 Router.navigateTo 反对11种不同成果的切换动画,反对延时设置和自定义切换成果,上面将会对所有的成果展现进去,不便当前能够依据理论需要进行抉择。

切换成果分类

fluro内置的切换动画能够分为3类:

  1. 各平台原生成果
  2. 非原生成果
  3. 自定义成果
Router.navigateTo(    context    path    transition    transitionBuilder    transitionDuration)

上一篇文章,曾经介绍过Flutter的路由治理和Fluro的应用了,咱们曾经晓得 Router.navigateTo 函数。
只有批改transition则能够实现不同的切换成果,transitionBuilder用于自定义切换成果,transitionDuration为切换动画所需工夫的设置。

1. 各平台原生成果

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

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

  1. 随平台应用成果:TransitionType.nativeTransitionType.nativeModal

  1. 应用安卓的成果:TransitionType.materialTransitionType.materialFullScreenDialog

  1. 应用ios的成果:TransitionType.cupertinoTransitionType.cupertinoFullScreenDialog

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

MaterialCupertino中,全屏成果的AppBar左侧是敞开按钮而不是后退按钮。

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

须要留神的是,以上6中原生的切换成果并不反对transitionDuration自定义切换工夫,均采纳和原生统一的成果。

2. 非原生成果

fluro也内置了4种常见的成果,这4个成果都是反对transitionDuration自定义切换工夫。

  1. 渐显:TransitionType.fadeIn
  2. 从左向右进入:TransitionType.inFromLeft

  1. 从右向左进入:TransitionType.inFromRight

  1. 从下向上进入: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切换);...

查看更多,请关注: