Hero 是 Flutter 提供的頁面轉場動畫的一種。
在進行頁面轉場時，它能夠共享頁面間檢視元素。
通過 Hero，可以很容易的實現圖中的動畫效果。
接下來看看如何實現的吧。
1.跳轉位置新增 Hero，包裹需要共享的 Widget
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
showPhoto(context);
},
child: Hero(
key: Key(photo.assetName),
// tag 是關鍵
tag: photo.tag,
child: Image.asset(
photo.assetName,
package: photo.assetPackage,
fit: BoxFit.cover,
)));
}
複製程式碼2.目標頁的共享元素也使用 Hero 包裹
Scaffold(
appBar: AppBar(title: Text('Hero PageB')),
body: SizedBox.expand(
child: Hero(
// tag 是關鍵
tag: photo.tag,
child: ClipRect(
child: Image.asset(
photo.assetName,
package: photo.assetPackage,
fit: BoxFit.cover,
),
),
),
),
);
複製程式碼實現方式很簡單，就是使用 Hero 包裹兩個頁面間的共享元素。
其中關鍵就是共享元素的 tag 必須相同。
剩餘的處理 Flutter 已經幫開發者完成了。
快自己動手試試吧。