Flutter入门：Hero共享元素

前言

在Android中可以设置共享元素，这样两个页面相同的元素在转场时就会有一个过渡动画，效果炫酷，用户体验也更好。

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

答案是一定的，在Flutter它就是Hero，也是一个widget（flutter中万物皆是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就不会再闪烁了，同理猜测如果使用了ResizeImage估计也会闪烁。

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