Flutter共享元素动画，你会吗？

最新推荐文章于 2024-11-27 10:48:43 发布

转载最新推荐文章于 2024-11-27 10:48:43 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ca828c8e51d456ce543eec2

文章标签：

#移动开发

本文介绍Flutter中的Hero动画组件，演示了如何使用Hero组件实现在页面转场时共享视图元素的动画效果。通过简单的示例代码，展示了设置共享元素及tag属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录传送门：《Flutter快速上手指南》先导篇

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 已经帮开发者完成了。

快自己动手试试吧。

目录传送门：《Flutter快速上手指南》先导篇