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

Flutter Hero 动画：页面间的无缝过渡

news 2026/7/14 9:02:10

Flutter Hero 动画：页面间的无缝过渡

让元素在页面间优雅地飞舞，创造令人难忘的视觉体验。

一、Hero 动画的魅力

作为一名追求像素级还原的 UI 匠人，我深知过渡动画的重要性。Hero 动画让用户在不同页面间感受到视觉上的连续性，就像魔术一样，一个元素从一个页面"飞"到另一个页面，创造出流畅的叙事体验。

二、基础实现

1. 源页面

import 'package:flutter/material.dart'; class SourcePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('产品列表')), body: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, ), itemCount: 6, itemBuilder: (context, index) { return GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => DetailPage(index: index), ), ); }, child: Hero( tag: 'product-$index', child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), image: DecorationImage( image: NetworkImage( 'https://picsum.photos/seed/$index/300/300', ), fit: BoxFit.cover, ), ), ), ), ); }, ), ); } }

2. 目标页面

class DetailPage extends StatelessWidget { final int index; DetailPage({required this.index}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('产品详情')), body: SingleChildScrollView( child: Column( children: [ Hero( tag: 'product-$index', child: Container( height: 300, decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://picsum.photos/seed/$index/600/400', ), fit: BoxFit.cover, ), ), ), ), Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '产品名称 $index', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, ), ), SizedBox(height: 16), Text( '这是产品 $index 的详细描述。包含了产品的各种特性和使用方法。', style: TextStyle(fontSize: 16), ), SizedBox(height: 24), ElevatedButton( onPressed: () { Navigator.pop(context); }, child: Text('返回'), ), ], ), ), ], ), ), ); } }

三、高级用法

1. 自定义 Hero 动画

class CustomHeroAnimation extends StatelessWidget { final String tag; final Widget child; CustomHeroAnimation({required this.tag, required this.child}); @override Widget build(BuildContext context) { return Hero( tag: tag, createRectTween: (begin, end) { return MaterialRectArcTween(begin: begin, end: end); }, flightShuttleBuilder: (flightContext, animation, flightDirection, fromHeroContext, toHeroContext) { return ScaleTransition( scale: animation.drive( Tween<double>(begin: 0.8, end: 1.0).chain( CurveTween(curve: Curves.easeInOut), ), ), child: child, ); }, child: child, ); } }

2. 多个 Hero 动画

// 源页面 class SourcePage extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () => Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPage()), ), child: Column( children: [ Hero( tag: 'image', child: Container( width: 100, height: 100, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( image: NetworkImage('https://picsum.photos/200/200'), fit: BoxFit.cover, ), ), ), ), Hero( tag: 'title', child: Material( type: MaterialType.transparency, child: Text( '产品标题', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), ), ), ], ), ); } } // 目标页面 class DetailPage extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Hero( tag: 'image', child: Container( width: 300, height: 300, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( image: NetworkImage('https://picsum.photos/600/600'), fit: BoxFit.cover, ), ), ), ), Hero( tag: 'title', child: Material( type: MaterialType.transparency, child: Text( '产品标题', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold), ), ), ), ], ); } }

3. 共享元素转场

// 路由配置 MaterialPageRoute( builder: (context) => DetailPage(), settings: RouteSettings(name: '/detail'), fullscreenDialog: true, ); // 手势控制 class InteractiveHero extends StatefulWidget { @override _InteractiveHeroState createState() => _InteractiveHeroState(); } class _InteractiveHeroState extends State<InteractiveHero> { double _scale = 1.0; @override Widget build(BuildContext context) { return GestureDetector( onScaleUpdate: (details) { setState(() { _scale = details.scale; }); }, onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPage()), ); }, child: Transform.scale( scale: _scale, child: Hero( tag: 'interactive', child: Container( width: 200, height: 200, color: Colors.blue, ), ), ), ); } }