flutter如何实现go_router切换页面动画

在Flutter中使用go_router进行页面导航时，如何自定义页面切换动画？官方文档提到可以通过transitionsBuilder实现，但具体该如何配置？比如想实现淡入淡出或滑动动画效果，是否有完整的示例代码可以参考？另外，这种动画配置是否会影响路由的返回动画？

2 回复

在Flutter中使用go_router实现页面切换动画，可以通过CustomTransitionPage自定义过渡效果。具体步骤如下：

  1. 在GoRouter配置的routes中，对需要动画的页面使用CustomTransitionPage：
GoRoute(
  path: '/detail',
  pageBuilder: (context, state) => CustomTransitionPage(
    key: state.pageKey,
    child: const DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 定义动画效果
      return SlideTransition(
        position: animation.drive(
          Tween(begin: const Offset(1.0, 0.0), end: Offset.zero)
              .chain(CurveTween(curve: Curves.ease)),
        ),
        child: child,
      );
    },
  ),
)
  1. 常用动画效果：
  • 滑动：SlideTransition
  • 淡入淡出：FadeTransition
  • 缩放：ScaleTransition
  • 旋转：RotationTransition
  1. 可以组合多个动画，或使用PageRouteBuilder实现更复杂效果。

注意：确保在pubspec.yaml中已正确引入go_router依赖。

更多关于flutter如何实现go_router切换页面动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 go_router 实现页面切换动画，可以通过 GoRouter 的 pageBuilder 参数自定义页面过渡。以下是实现步骤和示例代码：

1. 基本动画配置

在 GoRouter 的构造函数中，使用 pageBuilder 返回带有动画的 CustomTransitionPage：

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

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const HomePage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // 定义动画效果
          return FadeTransition(
            opacity: animation,
            child: child,
          );
        },
      ),
    ),
    GoRoute(
      path: '/details',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const DetailsPage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // 从底部滑动进入
          return SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(0, 1),
              end: Offset.zero,
            ).animate(animation),
            child: child,
          );
        },
      ),
    ),
  ],
);

2. 常用动画类型

  • 渐隐渐现：使用 FadeTransition
  • 滑动效果：使用 SlideTransition
  • 缩放效果：使用 ScaleTransition
  • 旋转效果：使用 RotationTransition

3. 组合动画

通过 Stack 或 Column 组合多个动画：

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return ScaleTransition(
    scale: animation,
    child: FadeTransition(
      opacity: animation,
      child: child,
    ),
  );
}

4. 自定义动画曲线和时长

在 pageBuilder 中控制动画行为：

pageBuilder: (context, state) => CustomTransitionPage(
  transitionDuration: const Duration(milliseconds: 500), // 动画时长
  reverseTransitionDuration: const Duration(milliseconds: 300), // 返回时长
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    final curvedAnimation = CurvedAnimation(
      parent: animation,
      curve: Curves.easeInOut, // 动画曲线
    );
    return FadeTransition(
      opacity: curvedAnimation,
      child: child,
    );
  },
  child: const DetailsPage(),
),

5. 导航跳转

使用 context.go() 或 context.push() 触发动画：

// 在按钮事件中跳转
onPressed: () => context.go('/details')

注意事项

  • 确保每个 GoRoute 的 pageKey 使用 state.pageKey 保证页面状态正确
  • 可通过 transitionsBuilder 完全自定义动画效果
  • 动画性能取决于设备，复杂动画建议测试低端设备

通过以上方法，可以灵活实现各种页面切换动画效果。

回到顶部