如何在Flutter中实现页面导航的平滑过渡效果？

一、使用Flutter内置组件实现 #

1. 自定义PageRoute过渡 #

Flutter默认的MaterialPageRoute和CupertinoPageRoute自带平台适配的过渡效果，若需自定义平滑过渡，可通过PageRouteBuilder自由定义动画逻辑。

淡入淡出过渡示例：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final opacityTween = Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.easeInOut));
      return FadeTransition(
        opacity: animation.drive(opacityTween),
        child: child,
      );
    },
    transitionDuration: const Duration(milliseconds: 500), // 自定义过渡时长
  ),
);

底部滑入过渡示例：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final positionTween = Tween(begin: const Offset(0.0, 1.0), end: Offset.zero)
          .chain(CurveTween(curve: Curves.easeOutCubic));
      return SlideTransition(
        position: animation.drive(positionTween),
        child: child,
      );
    },
  ),
);

2. Hero动画 #

Hero动画用于实现同一组件在两个页面间的无缝过渡（如列表图片点击后在详情页放大），只需在两个页面的对应组件上添加Hero并指定相同tag即可。

源页面（列表页）：

Hero(
  tag: 'product-image-1', // 唯一标识，与目标页一致
  child: ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.network(
      'https://example.com/product1.jpg',
      width: 80,
      height: 80,
      fit: BoxFit.cover,
    ),
  ),
)

目标页面（详情页）：

Hero(
  tag: 'product-image-1',
  child: Image.network(
    'https://example.com/product1.jpg',
    width: double.infinity,
    height: 300,
    fit: BoxFit.cover,
  ),
)

导航时使用普通Navigator.push，Flutter会自动处理组件过渡动画。

二、第三方库简化开发 #

若不想手动编写过渡逻辑，可使用以下成熟库：

• animations：官方维护库，提供SharedAxisTransition、ContainerTransform等Material Design规范的过渡效果，适配双端。
• flutter_page_transition：包含数十种预定义过渡效果（旋转、翻转、缩放等），调用简单。

animations库示例（SharedAxisTransition）：

1. 在pubspec.yaml添加依赖：

dependencies:
  animations: ^2.0.7

2. 使用代码：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SharedAxisTransition(
        animation: animation,
        secondaryAnimation: secondaryAnimation,
        transitionType: SharedAxisTransitionType.scaled, // 缩放式过渡
        child: child,
      );
    },
  ),
);

三、跨平台兼容性注意事项 #

• 优先使用MaterialPageRoute/CupertinoPageRoute：自动适配平台风格（Android向上滑入，iOS从左向右推入），保证原生体验。
• 自定义过渡需区分平台时，可通过Theme.of(context).platform判断，分别设置对应动画逻辑。
• 真机测试：在Android和iOS真机上验证动画流畅度，避免复杂组件过渡卡顿，可使用RepaintBoundary包裹重绘频繁的组件。
• 第三方库选择：优先选官方或社区活跃度高的库，确保双端适配完善。

四、学习资源 #

• Flutter官方文档：查看「导航与路由」章节中关于自定义过渡和Hero动画的详细说明。
• Flutter官方示例：SDK自带的example项目包含多种导航动画实现案例，可直接运行参考。

内容的提问来源于stack exchange，提问作者Shashi