Flutter：在 Navigator 2.0 中更改页面转换

Question

我有一个Router，它的工作原理如下： 第一步创建了一个MaterialPage：

return MaterialPage(
      child: SomePage(),
      key: keyName,
      name: pageName,
      arguments: routeSettings.arguments,
    );

并添加到Pages 的数组中，然后调用notifyListeners()。这个路由器类有一个像这样的build 方法：

return Navigator(
      key: navigatorKey,
      pages: List.of(_pages),
      onPopPage: _onPopPage,
    );

现在我的问题是，在这样的设置中，某些页面的页面转换在哪里可以更改？我试图使用page_transition 包，但它返回一个PageTransition 对象而不是Widget，这是MaterialPage 所必需的。

Answer 1

您可以使用PageRouteBuilder 来实现不同的页面转换。例如幻灯片动画：

class SlideRoute extends PageRouteBuilder {
  final Widget page;
  final RouteSettings settings;
  SlideRoute({required this.page, required this.settings})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          settings: settings,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(1, 0),
              end: Offset.zero,
            ).animate(animation),
            child: child,
          ),
        );
}

然后你可以在返回路由时使用它，例如onGenerateRoute 的MaterialApp：

MaterialApp(
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/route1':
        return SlideRoute(page: Route1(), settings: settings);
      case '/route2':
        return SlideRoute(page: Route2(), settings: settings);
    }
  },
)