如何修改Flutter导航器中侧滑返回手势动画的速度?
如何修改Flutter导航器中侧滑返回手势动画的速度?
你这个问题问得好!我之前也碰到过一模一样的情况——自定义MaterialPageRoute的transitionDuration和reverseTransitionDuration只能搞定编程式的跳转动画速度,对侧滑返回这种手势触发的动画完全没效果。别着急,我来教你怎么解决:
其实侧滑返回的动画速度是由路由内部的动画控制器决定的,默认情况下这个控制器并不会直接响应我们设置的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的话,直接设置transitionDuration和reverseTransitionDuration就可以同时影响编程式跳转和侧滑返回的动画速度,不需要额外覆盖控制器方法。
内容来源于stack exchange




