Flutter Hero动画

封面图 • 2026-03-24 • Flutter

在 Flutter 中，`Hero` 动画是用于在两个页面之间实现**共享元素过渡**（Shared Element Transitions）的一种方式。它允许你在导航时，让一个元素（如图片、图标等）从一个页面平滑地移动到另一个页面，从而提供更流畅的用户体验。

---

## ✅ 什么是 Hero 动画？

`Hero` 是一个特殊的 Widget，它可以在不同页面之间进行动画过渡。当你从一个页面跳转到另一个页面时，如果两个页面中都有相同 `tag` 的 `Hero`，Flutter 会自动为它们创建一个动画效果。

---

## 📌 基本用法

### 1. 在第一个页面中使用 `Hero`

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: Hero(
          tag: "heroTag",
          child: Image.network(
            "https://via.placeholder.com/200x200",
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}
```

### 2. 在第二个页面中使用相同的 `tag`

```dart
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Page")),
      body: Center(
        child: Hero(
          tag: "heroTag",
          child: Image.network(
            "https://via.placeholder.com/300x300",
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}
```

### 3. 从第一个页面跳转到第二个页面

```dart
// 在 FirstPage 中添加一个按钮：
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  },
  child: Text("Go to Second Page"),
)
```

---

## 🔁 可选参数

- `tag`: 必须的，用来匹配两个页面中的 `Hero`。
- `child`: 要动画化的 widget。
- `flightShuttleBuilder`: 自定义动画行为（可选）。
- `placeholderBuilder`: 在动画开始前显示的占位符（可选）。

---

## 🔄 使用 `flightShuttleBuilder` 自定义动画

你可以通过 `flightShuttleBuilder` 来自定义动画的中间状态：

```dart
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
    // 自定义飞行动画
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);
```

或者使用 `Hero` 的 `flightShuttleBuilder`：

```dart
Hero(
  tag: "heroTag",
  flightShuttleBuilder: (context, animation, direction, _, __, ___) {
    return FadeTransition(
      opacity: animation,
      child: YourWidget(),
    );
  },
  child: YourWidget(),
),
```

---

## 🧠 注意事项

- `Hero` 只能在 `MaterialPageRoute` 或 `CupertinoPageRoute` 中使用。
- 如果两个页面中没有相同 `tag` 的 `Hero`，则不会有任何动画。
- `Hero` 不支持嵌套使用（除非你自己处理）。

---

## 📱 示例：点击图片跳转并展示 Hero 动画

```dart
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Hero(
            tag: "heroImage",
            child: Image.network(
              "https://via.placeholder.com/200x200",
              width: 200,
              height: 200,
            ),
          ),
        ),
      ),
    );
  }
}
```

```dart
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Page")),
      body: Center(
        child: Hero(
          tag: "heroImage",
          child: Image.network(
            "https://via.placeholder.com/300x300",
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}
```

---

## ✅ 总结

| 特性 | 说明 |
|------|------|
| `Hero` | 用于实现页面间共享元素的动画过渡 |
| `tag` | 必须相同才能匹配动画 |
| 支持类型 | 图片、图标、文本等任何 widget |
| 支持框架 | `MaterialPageRoute` 和 `CupertinoPageRoute` |

---

如果你需要更高级的动画效果，可以结合 `AnimatedContainer`, `FadeTransition`, `SlideTransition` 等来实现。

是否需要我帮你做一个完整的示例项目？😊