在Flutter中实现Hero动画的页面路由效果，主要通过共享元素的平滑过渡来提升用户体验。以下是关键实现步骤和技术要点：
核心实现原理
- Hero组件 ：需在源页面和目标页面使用相同
tag标识的Hero组件包裹共享元素（如图片或控件），系统会自动计算过渡路径并执行动画26。 - 路由跳转 ：通过
Navigator.push触发页面切换，Hero动画会在路由切换过程中自动执行3。 - 动画控制 ：默认使用
MaterialRectArcTween实现位置和形状的插值动画，可通过自定义PageRouteBuilder调整过渡效果67。
代码实现示例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HeroSourcePage(),
);
}
}
class HeroSourcePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('源页面')),
body: Center(
child: GestureDetector(
child: Hero(
tag: 'heroTag', // 唯一标识
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => HeroTargetPage()),
),
),
),
);
}
}
class HeroTargetPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('目标页面')),
body: Center(
child: Hero(
tag: 'heroTag', // 与源页面相同tag
child: Container(
width: 200,
height: 200,
color: Colors.red,
- tag一致性 ：源页面和目标页面的Hero组件必须使用相同的
tag，否则动画失效23。 - 路由配置 ：可通过
PageRouteBuilder自定义过渡动画时长和效果，如渐隐或滑动7。 - 复杂场景 ：支持多Hero动画并行，但同一页面内的多个Hero需使用不同
tag6。
高级应用
- Dialog路由：Hero动画同样适用于Dialog等非全屏路由3。
- 自定义动画 ：通过
transitionsBuilder重写默认动画逻辑，如结合缩放和旋转效果。
完整示例可通过调整Container的子控件（如Image）实现图片缩放的动态效果