当前位置：首页 > news >正文

Flutter Hero Animation 详解

news 2026/6/13 14:01:40

Flutter Hero Animation 详解

一、Hero Animation 概述

Hero Animation（英雄动画）是 Flutter 中用于页面间共享元素过渡的动画效果。它可以让同一个元素在两个页面之间平滑过渡。

1.1 基本概念

Hero Widget- 标记为英雄的组件
Hero Tag- 唯一标识符，用于匹配两个页面的英雄组件
Flight- 英雄组件从源页面飞到目标页面的过程

二、基本用法

2.1 源页面

class SourcePage extends StatelessWidget { const SourcePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('源页面')), body: Center( child: GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute(builder: (_) => const TargetPage()), ); }, child: const Hero( tag: 'imageHero', child: Image( image: AssetImage('assets/image.jpg'), width: 100, height: 100, ), ), ), ), ); } }

2.2 目标页面

class TargetPage extends StatelessWidget { const TargetPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('目标页面')), body: const Center( child: Hero( tag: 'imageHero', child: Image( image: AssetImage('assets/image.jpg'), width: 300, height: 300, ), ), ), ); } }

三、自定义 Hero 动画

3.1 使用 HeroController

class CustomHeroController extends HeroController { @override Animation<double> createHeroFlightAnimation( HeroFlightDirection direction, Animation<double> overallAnimation, Hero hero, BuildContext context, ) { return CurvedAnimation( parent: overallAnimation, curve: direction == HeroFlightDirection.push ? Curves.easeOut : Curves.easeIn, ); } }

3.2 使用 flightShuttleBuilder

Hero( tag: 'customHero', flightShuttleBuilder: ( BuildContext flightContext, Animation<double> animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { return ScaleTransition( scale: animation, child: const Image(image: AssetImage('assets/image.jpg')), ); }, child: const Image(image: AssetImage('assets/image.jpg')), )

3.3 使用 placeholderBuilder

Hero( tag: 'placeholderHero', placeholderBuilder: (context, heroSize, child) { return Container( width: heroSize.width, height: heroSize.height, color: Colors.grey[200], child: const CircularProgressIndicator(), ); }, child: const Image(image: AssetImage('assets/image.jpg')), )

四、实战案例

4.1 图片画廊

class GalleryPage extends StatelessWidget { const GalleryPage({super.key}); @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8, ), itemCount: 9, itemBuilder: (context, index) { return GestureDetector( onTap: () { Navigator.push( context, PageRouteBuilder( pageBuilder: (_, __, ___) => DetailPage(index: index), transitionsBuilder: (_, animation, __, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ); }, child: Hero( tag: 'gallery-$index', child: Image.network( 'https://picsum.photos/200/200?random=$index', fit: BoxFit.cover, ), ), ); }, ); } }

4.2 卡片详情过渡

class CardDetailPage extends StatelessWidget { final int index; const CardDetailPage({super.key, required this.index}); @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( expandedHeight: 300, flexibleSpace: FlexibleSpaceBar( background: Hero( tag: 'card-image-$index', child: Image.network( 'https://picsum.photos/600/400?random=$index', fit: BoxFit.cover, ), ), ), ), const SliverToBoxAdapter( child: Padding( padding: EdgeInsets.all(16), child: Text('卡片详情内容...'), ), ), ], ), ); } }

4.3 多个 Hero 动画

// 源页面 Row( children: [ Hero( tag: 'avatar', child: const CircleAvatar(radius: 40), ), const SizedBox(width: 16), Hero( tag: 'name', child: const Text('用户名'), ), ], ) // 目标页面 Column( children: [ Hero( tag: 'avatar', child: const CircleAvatar(radius: 80), ), const SizedBox(height: 16), Hero( tag: 'name', child: const Text('用户名', style: TextStyle(fontSize: 24)), ), ], )

五、性能优化

5.1 使用 RepaintBoundary

Hero( tag: 'complexHero', child: RepaintBoundary( child: const ComplexWidget(), ), )

5.2 避免复杂 Widget

// 不好：复杂 Widget 作为 Hero 子组件 Hero( tag: 'badHero', child: Container( child: Column( children: [/* 很多子组件 */], ), ), ) // 好：简化子组件 Hero( tag: 'goodHero', child: const Image(image: AssetImage('assets/image.jpg')), )