Flutter 自定义 PageRouteBuilder 详解

PageRouteBuilder 是 Flutter 中用于创建自定义页面跳转动画的类。通过自定义 PageRouteBuilder，您可以实现各种酷炫的页面跳转效果，例如淡入淡出、缩放、滑动等。

自定义 PageRouteBuilder 的步骤

要自定义 PageRouteBuilder，您可以使用以下步骤：

创建 RouteSettings 对象: 该对象将传递给 PageRouteBuilder 的构造函数，其中包含路由名称、路由参数等信息。
创建 PageRouteBuilder 对象: 并传递 RouteSettings 对象。
设置转换函数: 该函数将接收 BuildContext 对象、Animation 对象和 Animation 对象，并返回一个新的 Widget。
可选：设置转换持续时间、曲线等属性: 例如，您可以在 transitionDuration 属性中设置动画持续时间，在 transitionsBuilder 属性中设置动画曲线。
使用 Navigator.of(context).push 方法: 将 PageRouteBuilder 对象推入导航器堆栈中。

示例代码

class MyCustomRoute<T> extends PageRouteBuilder<T> {
  final Widget Function(BuildContext, Animation<double>, Animation<double>) builder;

  MyCustomRoute({required RouteSettings settings, required this.builder})
      : super(
          settings: settings,
          transitionDuration: Duration(seconds: 1),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return builder(context, animation, secondaryAnimation);
          },
        );
}

在这个示例中，我们创建了一个 MyCustomRoute 类，继承自 PageRouteBuilder。我们传入一个名为 builder 的函数，该函数将接收 BuildContext 对象、Animation 对象和 Animation 对象，并返回一个新的 Widget。

我们设置了转换持续时间为 1 秒，并将转换函数设置为 builder 函数。在这个函数中，我们将传入的 Widget 包装在一个透明度动画中，并返回新的 Widget。

使用自定义 Route

现在，我们可以使用 MyCustomRoute 类来推入一个自定义 Route：

Navigator.of(context).push(
  MyCustomRoute(
    settings: RouteSettings(name: '/myCustomRoute'),
    builder: (context, animation, secondaryAnimation) {
      return Opacity(
        opacity: animation.value,
        child: MyCustomWidget(),
      );
    },
  ),
);

在这个示例中，我们创建了一个 MyCustomRoute 对象，并将其传递给 Navigator.of(context).push 方法。我们设置了 RouteSettings 对象的名称为 '/myCustomRoute'，并传递了一个 builder 函数，它将返回一个新的 Widget，该 Widget 包装在一个透明度动画中。

现在，当我们调用 Navigator.of(context).push 方法时，就会推入一个自定义的 PageRouteBuilder，并根据我们传递的 builder 函数创建新的 Widget。

总结

通过自定义 PageRouteBuilder，您可以轻松实现各种页面跳转动画效果，丰富您的 Flutter 应用的用户体验。