前言

在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的同時不閃爍的解決方法。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Flutter入门：Hero共享元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。