案例概述

本案例展示如何使用 PageRouteBuilder 创建自定义页面过渡动画。PageRouteBuilder 是 Flutter 中用于自定义页面导航动画的强大工具，支持淡入淡出、滑动、缩放等多种过渡效果。

在现代应用中，页面过渡动画广泛应用于：

• 页面导航：在页面切换时创建平滑的过渡效果
• 模态对话框：对话框的弹出和关闭动画
• 列表详情：从列表页到详情页的过渡动画
• 应用主题：应用特定的导航风格

PageRouteBuilder 的优势在于它提供了完整的动画自定义能力，可以实现复杂的导航动画。在企业应用中，需要处理多种导航场景、不同屏幕尺寸的适配、性能优化等问题。

此外，页面过渡还应支持键盘导航、无障碍支持、性能优化等功能。在 PC 端应用中，需要确保动画效果流畅，不影响应用性能。

核心概念

1. PageRouteBuilder（页面路由构建器）

PageRouteBuilder 是一个自定义页面路由类，用于创建自定义过渡动画。其主要特点包括：

• pageBuilder 参数：构建目标页面
• transitionsBuilder 参数：定义过渡动画
• transitionDuration 参数：动画时长
• reverseTransitionDuration 参数：返回动画时长
• opaque 参数：是否不透明

2. transitionsBuilder（过渡构建器）

transitionsBuilder 定义页面切换时的动画效果。其主要特点包括：

• animation 参数：主动画控制器
• secondaryAnimation 参数：返回动画控制器
• child 参数：目标页面
• 支持多种动画：FadeTransition、SlideTransition 等

3. 过渡类型与效果

PageRouteBuilder 支持多种过渡效果：

• 淡入淡出：FadeTransition
• 滑动：SlideTransition
• 缩放：ScaleTransition
• 旋转：RotationTransition
• 组合动画：多种动画组合

代码详解

1. 淡入淡出过渡

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
)

2. 滑动过渡

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return SlideTransition(
    position: Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset.zero)
        .animate(animation),
    child: child,
  );
}

3. 缩放过渡

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

高级话题：页面过渡的企业级应用

1. 动态/响应式设计与多屏幕适配

根据屏幕宽度调整过渡动画时长，确保在所有设备上都有合适的效果。

final duration = MediaQuery.of(context).size.width < 600 
  ? Duration(milliseconds: 300) 
  : Duration(milliseconds: 500);

2. 动画曲线与缓动效果

使用不同的动画曲线创建不同的视觉效果。

final curvedAnimation = CurvedAnimation(
  parent: animation,
  curve: Curves.easeInOutCubic,
);

3. 搜索/过滤/排序功能

为列表页到详情页的导航添加过渡动画。

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (_, __, ___) => DetailPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
))

4. 选择与批量操作

为选择操作提供视觉反馈。

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (_, __, ___) => SelectionPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return ScaleTransition(scale: animation, child: child);
  },
))

5. 加载与缓存策略

在加载数据时使用过渡动画。

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (_, __, ___) => LoadingPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
))

6. 键盘导航与快捷键

为导航添加键盘支持。

Focus(
  onKey: (node, event) {
    if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
      Navigator.push(context, _buildPageRoute());
      return KeyEventResult.handled;
    }
    return KeyEventResult.ignored;
  },
  child: ElevatedButton(onPressed: () => Navigator.push(context, _buildPageRoute()), child: ...),
)

7. 无障碍支持与屏幕阅读器

为导航添加无障碍标签。

Semantics(
  label: '打开详情页',
  button: true,
  onTap: () => Navigator.push(context, _buildPageRoute()),
  child: ElevatedButton(...),
)

8. 样式自定义与主题适配

创建可配置的过渡主题。

class PageTransitionTheme {
  final Duration duration;
  final Curve curve;
  final TransitionType type;
  
  const PageTransitionTheme({
    this.duration = const Duration(milliseconds: 300),
    this.curve = Curves.easeInOut,
    this.type = TransitionType.fade,
  });
}

9. 数据持久化与导出

保存导航历史。

void _saveNavigationHistory() async {
  // 保存导航历史到本地存储
}

10. 单元测试与集成测试

为页面过渡编写测试用例。

void main() {
  testWidgets('页面过渡测试', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: HomePage()));
    await tester.tap(find.byType(ElevatedButton));
    await tester.pumpAndSettle();
    expect(find.byType(DetailPage), findsOneWidget);
  });
}

OpenHarmony PC 端适配要点

1. 屏幕宽度检测：根据屏幕宽度调整过渡时长
2. 响应式动画：在 PC 端使用更长的过渡时长
3. 键盘导航：支持 Enter 等快捷键触发导航
4. 鼠标交互：支持悬停效果
5. 性能优化：避免过度复杂的过渡动画

实际应用场景

1. 页面导航：在页面切换时创建平滑的过渡效果
2. 模态对话框：对话框的弹出和关闭动画
3. 列表详情：从列表页到详情页的过渡动画
4. 应用主题：应用特定的导航风格
5. 返回导航：返回上一页时的过渡动画

扩展建议

1. 支持多种过渡类型
2. 实现过渡动画缓存
3. 添加过渡动画预加载
4. 支持自定义过渡效果
5. 实现过渡动画取消

总结

PageRouteBuilder 是创建自定义页面过渡的强大工具。通过合理的设计和实现，可以创建出功能完整、用户体验良好的导航系统。在 PC 端应用中，充分利用屏幕空间、提供键盘导航和无障碍支持是关键。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net