「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

前言

在Android中我们知道是可以设置共享元素的，这样在两个页面中相同的元素在转场时就会以一个过渡动画的形式展示，效果炫酷，用户体验上也更好。

那么在Flutter中有同样的功能么？

答案是一定的，在Flutter中它就是Hero，也是一个widget（flutter中万物皆是widget）。Hero指的是可以在路由(页面)之间“飞行”的widget。所以它实现了共享元素转换或共享元素动画的动画风格。

Hero

相对于Android中的共享元素功能，Hero使用要简单的非常多，只需要将要共享的元素（widge）用Hero包一层即可，比如两个页面中都有一个Image，里面是同一张图片（比如一个是列表页面，一个是详情页面，都用了同一张图片），那么就可以通过hero将他们设置为共享元素

页面A中

Hero(
    tag: 'thumb',
    child: Image.file(
      File('xxxx/thumb'),
      fit: BoxFit.cover,
      filterQuality: FilterQuality.low,
    )
)

页面B中

Hero(
    tag: 'thumb',  //tag与上一个页面的一致
    child: Image.file(
      File('xxxx/thumb'),
    )
)

这样当页面切换是，就可以看到元素的移动缩放等过渡动画了。

这里注意：

在Hero下的tag要必须一致，同时为了获得最佳效果，Hero下面的widget树要几乎相同，比如上面的两个Hero下都只有一个Image，但是也可以是复杂的布局，这时最好widget树相似，否则实际效果会很差。

图片闪烁？

在我实际的开发过程中发现，为Image设置了共享元素后，在切换页面时发现动画时正常的，但是播放完动画后图片闪烁了一下。

经过反复测试发现是图片的cache机制导致的，比如我们将上面的代码修改一下：

页面A中

Hero(
    tag: 'thumb',
    child: Image.file(
      File('xxxx/thumb'),
      fit: BoxFit.cover,
      filterQuality: FilterQuality.low,
      cacheWidth: window.physicalSize.width ~/ 2.2,
    )
)

页面B中

Hero(
    tag: 'thumb',  //tag与上一个页面的一致
    child: Image.file(
      File('xxxx/thumb'),
      cacheWidth: window.physicalSize.width ~/ 2.2,
    )
)

为图片都加上cacheWidth。我们设置cacheWidth或cacheHeight是为了加载图片时压缩图片以节省内存空间，同时缓存到内存里。但是在Hero下的Image如果设置了cacheWidth或cacheHeight，在切换场景情况下过渡动画结束时就会闪一下。

去掉cache就不会再闪烁了，这里我简单猜测是因为resize导致的，因为需要resize所以Hero无法判断两个Image中的图片是不是完全一样（可以理解Hero没有对cacheWidth进行比较），所以到B页面后就没有直接使用内存中A页面的图片，而是重新加载resize了一次，所以会闪烁。

但是目前未找到在使用cache的同时不闪烁的解决方法。

Flutter入门：Hero共享元素

前言

Hero

图片闪烁？