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

目录传送门：《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快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github