面试题：Flutter中MaterialPageRoute的过渡动画如何自定义

Question

在Flutter开发中，MaterialPageRoute默认有一套过渡动画。如果想要自定义其过渡动画，应该怎么做？请描述实现的主要步骤以及涉及到的关键类和方法。

Answer 1

1. 主要步骤：
   • 创建自定义路由类：继承自PageRouteBuilder，因为PageRouteBuilder允许通过构造函数自定义页面过渡动画。
   • 设置过渡动画：在PageRouteBuilder的构造函数中，通过transitionsBuilder属性来定义过渡动画。
   • 使用自定义路由：在需要跳转页面的地方，使用自定义的路由类来替换MaterialPageRoute。
2. 关键类和方法：
   • PageRouteBuilder类：它是一个可以自定义过渡动画的路由类。构造函数如下：

PageRouteBuilder({
  required this.pageBuilder,
  this.transitionsBuilder,
  this.transitionDuration = const Duration(milliseconds: 300),
  this.reverseTransitionDuration = const Duration(milliseconds: 300),
  this.opaque = true,
  this.barrierDismissible = false,
  this.barrierColor,
  this.barrierLabel,
  this.maintainState = true,
  this.fullscreenDialog = false,
})

• transitionsBuilder方法：这是PageRouteBuilder构造函数中的一个属性，用于定义过渡动画。其定义如下：

TransitionsBuilder transitionsBuilder = (
  BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation,
  Widget child,
) {
  // 在这里实现自定义过渡动画，例如使用动画库对child进行变换等操作
  return child;
};

• 使用示例：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => TargetPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 自定义动画，比如淡入动画
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);