You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何修改Flutter导航器中侧滑返回手势动画的速度?

如何修改Flutter导航器中侧滑返回手势动画的速度?

你这个问题问得好!我之前也碰到过一模一样的情况——自定义MaterialPageRoutetransitionDurationreverseTransitionDuration只能搞定编程式的跳转动画速度,对侧滑返回这种手势触发的动画完全没效果。别着急,我来教你怎么解决:

其实侧滑返回的动画速度是由路由内部的动画控制器决定的,默认情况下这个控制器并不会直接响应我们设置的reverseTransitionDuration,所以我们需要自定义路由的时候,额外覆盖createAnimationController方法,手动指定控制器的时长参数。

具体代码示例如下:

class MyRoute extends MaterialPageRoute {
  MyRoute({required super.builder, super.settings});

  // 编程式push/pop的动画时长
  @override
  Duration get transitionDuration => const Duration(milliseconds: 250);
  @override
  Duration get reverseTransitionDuration => const Duration(milliseconds: 125);

  // 关键:自定义动画控制器,让手势动画也使用我们设置的时长
  @override
  AnimationController createAnimationController() {
    return AnimationController(
      duration: transitionDuration,
      reverseDuration: reverseTransitionDuration,
      vsync: navigator!.overlay!,
    );
  }
}

这样修改之后,侧滑返回的动画速度就会跟着我们设置的reverseTransitionDuration变化了。这里需要注意:手势驱动的动画是根据你的滑动速度动态调整完成时间的,reverseTransitionDuration其实是滑动到边缘时的最大动画时长——如果你快速滑动,动画会更快完成;慢速滑动的话,就会接近你设置的时长。

另外,如果你的项目是iOS风格的导航,使用CupertinoPageRoute的话,直接设置transitionDurationreverseTransitionDuration就可以同时影响编程式跳转和侧滑返回的动画速度,不需要额外覆盖控制器方法。

内容来源于stack exchange

火山引擎 最新活动