在Flutter中为go_router设置默认转场

Question

如go_router文档所述，设置单个页面的pageBuilder-Transitions非常容易。 但是，我想为所有页面设置默认的PageTransition。

如何在Flutter中使用go_router设置默认页面转换？

单个页面：

  // this is the proposed method to do it for single pages
  // how can i apply it to all pages without writing the same code?
  GoRoute(
      path: '/login',
      builder: (context, state) => const LoginScreen(),
      pageBuilder: (context, state) => CustomTransitionPage<void>(
        key: state.pageKey,
        child: const LoginScreen(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) =>
            FadeTransition(opacity: animation, child: child),
      ),
    ),

最好的问候

- Marwin Lebensky

Answer 1

go_router包当前不支持此功能，但为了减少代码重复，您可以创建一个帮助函数，应用于您的路由的自定义转换，例如：

CustomTransitionPage buildPageWithDefaultTransition<T>({
  required BuildContext context, 
  required GoRouterState state, 
  required Widget child,
}) {
  return CustomTransitionPage<T>(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) => 
      FadeTransition(opacity: animation, child: child),
  );
}

<...>

GoRoute(
  path: '/login',
  builder: (context, state) => const LoginScreen(),
  pageBuilder: (context, state) => buildPageWithDefaultTransition<void>(
    context: context, 
    state: state, 
    child: LoginScreen(),
  ),
),

- mkobuolys

---

它运行正常。已点赞。 我想知道在 transitionBuilder 的调用中，animation 和 secondaryAnimation 对象来自哪里？ - yurin

Answer 2

更加正确的方法是从CustomTransitionPage继承。

class WebPage extends CustomTransitionPage {
  WebPage({
    LocalKey key,
    ... // other properties taken from `MaterialPage`
    required Widget child
  }) : super(
         key: key,
         transitionBuilder: (...) {
           return FadeTransition(...);
         }
         child: child, // Here you may also wrap this child with some common designed widget
       );
}

然后

GoRoute(
  path: '/login',
  pageBuilder: (context, state) => WebPage(
    key: state.pageKey,
    child: const LoginScreen(),
  ),
),

- BambinoUA

---

请查看go_router包中NoTransitionPage类的源代码（custom_transition_page.dart），以获取完整的实现示例。 - IcyIcicle

答案正确但无法运行。请查看此答案以获取可编译和工作的示例。我还认为需要删除GoRoute.builder。 - BeniaminoBaggins

Answer 3

进一步扩展@mkobuolys的答案，可以通过返回创建页面构建器的函数来进一步减少样板代码，即：

CustomTransitionPage buildPageWithDefaultTransition<T>({
  required BuildContext context,
  required GoRouterState state,
  required Widget child,
}) {
  return CustomTransitionPage<T>(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
        FadeTransition(opacity: animation, child: child),
  );
}

Page<dynamic> Function(BuildContext, GoRouterState) defaultPageBuilder<T>(
        Widget child) =>
    (BuildContext context, GoRouterState state) {
      return buildPageWithDefaultTransition<T>(
        context: context,
        state: state,
        child: child,
      );
    };

路由器看起来会像这样：

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/a',
      builder: (context, state) => const PageA(),
      pageBuilder: defaultPageBuilder(const PageA()),
    ),
    GoRoute(
      path: '/b',
      builder: (context, state) => const PageB(),
      pageBuilder: defaultPageBuilder(const PageB()),
    ),
  ],
);

- Tomas Smagurauskas

---

我喜欢这个实现。您会如何在页面构建器上处理参数或查询参数？ - undefined

Answer 4

以下是转换工厂的代码（大部分基于@mkobuolys的答案）。它增加了3种过渡效果：scale、rotation和size。

对我来说，Rotation 转了太多圈，size 看起来几乎没有过渡效果，但 scale 还好。

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class RouterTransitionFactory {
 static CustomTransitionPage getTransitionPage(
  {required BuildContext context,
  required GoRouterState state,
  required Widget child,
  required String type}) {
 return CustomTransitionPage(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      switch (type) {
        case 'fade':
          return FadeTransition(opacity: animation, child: child);
        case 'rotation':
          return RotationTransition(turns: animation, child: child);
        case 'size':
          return SizeTransition(sizeFactor: animation, child: child);
        case 'scale':
          return ScaleTransition(scale: animation, child: child);
        default:
          return FadeTransition(opacity: animation, child: child);
      }
    });
  }
}

应该这样调用：

GoRoute(
    path: '/settings',
    builder: (context, state) => const Settings(), //StatelessWidget
    pageBuilder: (context, state) => RouterTransitionFactory.getTransitionPage(
      context: context,
      state: state,
      child: const Settings(), 
      type: 'scale', // fade|rotation|scale|size
    ),
  ),

- yurin

Answer 5

为什么不像这样使用，比接受的答案更简单呢？

GoRoute defaultTransitionGoRoute({
  required String path,
  required Widget Function(BuildContext, GoRouterState) pageBuilder,
}) {
  return GoRoute(
    path: path,
    pageBuilder: (context, state) => CustomTransitionPage<void>(
      key: state.pageKey,
      transitionDuration: const Duration(milliseconds: 300),
      child: pageBuilder(context, state),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: CurveTween(curve: Curves.easeIn).animate(animation),
          child: child,
        );
      },
    ),
  );
}

然后使用类似的方式

GoRoute(
      path: ScreenPaths.favorites,
      builder: (context, state) => FavorateScreen(),
    ),
    defaultTransitionGoRoute(
      path: ScreenPaths.viewEmail,
      pageBuilder: (context, state) {
        final extra = state.extra;
        return ViewEmailScreen(
          email: extra as HiveEmail,
        );
      },
    ),

- nhCoder