前言

在flutter中顯示圖片的就是Image，相當于android中的ImageView，但是要比ImageView功能強大很多。

比如支持gif動圖，可以加載網絡圖片，緩存機制，圖片處理等。實際上Image基本上實現了平時我們用到的圖片加載框架（如glide）的大部分功能。

Image

根據加載圖片的不同，可以使用不同的Image函數

• Image.asset 加載項目內資源
• Image.file 加載內存卡圖片
• Image.memory 加載byte[]數據
• Image.network 加載網絡圖片

使用起來也很簡單，如：

Image.file(File("xxx/xxxx/xxx.jpg"))

當然這只是最簡單的使用，函數中還有很多屬性可以設置，以達到不同的效果

比如圖片填充方式

Image.file(File("xxx/xxxx/xxx.jpg"), fit: BoxFit.cover)

設置fit這個屬性就可以了，cover表示圖片寬高比不變，切割圖片。

其他屬性就不一一介紹了。

resize和緩存

當加載超大圖片的時候，我們為了節省內存空間，需要將圖片壓縮成小尺寸再進行加載，即resize。

在Image中，resize是通過cacheWidth和cacheHeight這兩個屬性來處理的，同時也進行了緩存。

如：

Image.file(File("xxx/xxxx/xxx.jpg"),fit: BoxFit.cover,filterQuality: FilterQuality.low,cacheWidth: window.physicalSize.width ~/ 3, )

這里將cacheWidth設為屏幕寬度的1/3。

加載圖片的時候會先處理圖片，將讀到內存中的圖片數據的壓縮到寬度等于屏幕寬度的1/3，然后將新的小的圖片數據緩存起來，再加載顯示。

后面我們如果還用到了這個圖片，且cacheWidth設置一樣，就可以直接從緩存中取出數據加載顯示。

當然如果cacheWidth設置不一樣，就要重新再處理一次圖片。

cacheWidth和cacheHeight這兩個屬性可以同時設置，也可以只設置一個，如果不想改變圖片的寬高比，就設置一個就可以了。

Hero閃爍問題

但是這里注意，當使用Hero將Image當作共享元素時，如果設置了cacheWidth會出現閃爍的情況(注：Hero是flutter中處理共享元素的組件)。

拖動消失問題

如果頁面有拖動效果，這時發現當進行拖動時，設置了cacheWidth或cacheHeight的Image中的圖片會消失，拖動結束后圖片又出現。

解決方法，在image中添加gaplessPlayback: true即可。

FadeInImage占位圖

我們加載圖片，尤其是網絡圖片的時候，需要先設置一個占位圖。但是上面提到的幾個函數都不存在相關的屬性，怎么辦呢？

我們可以使用FadeInImage，如下：

FadeInImage(placeholder: AssetImage("images/default.png"),image: FileImage(File("xxx/xxxx/xxx.jpg")),fadeOutDuration: Duration(milliseconds: 1),fadeInDuration: Duration(milliseconds: 1),)

這里placeholder就是占位圖，而image就是真正加載的圖片

注意這兩個類型是ImageProvider，所以要使用FileImage、AssetImage等

FadeInImage在加載完成后替換占位圖會執行一個漸出漸近的動畫，所以也有相關的設置

比如fadeOutDuration和fadeInDuration設置動畫的時長，fadeOutCurve和fadeInCurve可以設置動畫曲線。

占位圖解決，但是我們還想使用壓縮和緩存怎么辦？

可以使用ResizeImage解決，如下：

FadeInImage(placeholder: AssetImage("images/default.png"),image: ResizeImage(FileImage(File("xxx/xxxx/xxx.jpg")), width: window.physicalSize.width ~/ 3),fadeOutDuration: Duration(milliseconds: 1),fadeInDuration: Duration(milliseconds: 1),)

用ResizeImage將FileImage、AssetImage等包裝一層就可以了。

關注公眾號：BennuCTech，發送“Flutter開發實戰”獲取《Flutter完整開發實戰詳解》電子書一份。

總結

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

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