Flutter 中 Image 的使用詳解(二) | Flutter Widgets

這是我參與更文挑戰的第22天，活動詳情查看： 更文挑戰

前言

前一篇咱們聊了 Image 的經常使用參數、對齊、縮放、混合模式的調配效果，這篇咱們繼續聊一些不太經常使用參數但可能會幫助到你優化 Image 的展現效果。

加載狀態

並非每次下載圖片資源均可以 100% 成功的，用戶的網絡狀態是很是複雜的，這時咱們就須要優化圖片的展現，讓用戶知道出現了什麼狀況，下一步應該怎麼辦。

默認錯誤展現

若是咱們不作處理，則會展現成這個樣子，體驗很是很差。

errorBuilder

常見的就是網絡錯誤致使下載失敗，這時咱們就須要展現一個錯誤的提示，來優化上面的展現。

Image.network(
  url2,
  width: 375,
  height: 375,
  // 加載錯誤
  errorBuilder: (context, error, stackTrace) {
    return Container(
      width: 375,
      height: 375,
      alignment: Alignment.center,
      child: Icon(
        Icons.error,
        color: Colors.red,
      ),
    );
  },
)
複製代碼

效果

目前只是展現了一個居中的錯誤圖標，你能夠加上更多，好比點擊重試等

loadingBuilder

有時用戶的網絡速度很慢或者圖片偏大，這時就須要讓用戶知道下載進度如何了，還要等待多久。咱們就須要展現下載進度了。

Image.network(
  'test',
  // url2,
  width: 375,
  height: 375,
  // 加載中
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) {
      return child;
    }
    return Container(
      width: 375,
      height: 375,
      alignment: Alignment.center,
      // 設置下載進度
      child: CircularProgressIndicator(
        value: loadingProgress.cumulativeBytesLoaded /
        loadingProgress.expectedTotalBytes!),
    );
  },
)
複製代碼

效果

上圖能夠看出咱們設置了一個下載進度，相對來講就友好不少。

frameBuilder

上一步看出顯示的時候仍是有些突兀，怎麼辦呢？還記得咱們以前聊的 AnimatedOpacity 嗎？這裏就可使用一下

Image.network(
  url2,
  width: 375,
  height: 375,
  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      return child;
    }
		// 設置不透明度動畫
    return AnimatedOpacity(
      opacity: frame == null ? 0 : 1,
      duration: Duration(seconds: 2),
      child: child,
    );
  },
)
複製代碼

效果

這樣效果就好不少了，接下來就是咱們封裝成一個通用的組件便可在項目中複用啦。

repeat - 重複排布

上篇咱們聊了縮放的方式來填充目標區域，這裏咱們再補充一種方式，設置 repeat 便可，這裏 ImageRepeat 總共有 4 種排布方式，下面咱們來看看吧。

// 這裏url 咱們設置的圖片比較小
// 圖片 url3
  String url3 =
      'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=60';
// 加載圖片
Image.network(
  url3,
  width: 375,
  height: 375,
  fit: BoxFit.none,
  // 重複排布參數調配
  repeat: ImageRepeat.noRepeat,
  // repeat: ImageRepeat.repeat,
  // repeat: ImageRepeat.repeatX,
  // repeat: ImageRepeat.repeatY,
)
複製代碼

效果

ImageRepeat.noRepeat（默認）	ImageRepeat.repeat
ImageRepeat.repeatX	ImageRepeat.repeatY

filterQuality - 圖像渲染質量

有時咱們圖片質量不是很好，可是展現上又但願有一個相對好一點的效果，這個時候怎麼辦呢？設置圖片渲染質量有怎麼得效果呢？咱們一塊兒來看看

Image.network(
  url3,
  width: 375,
  height: 375,
  fit: BoxFit.cover,
  // 渲染質量參數調配
  filterQuality: FilterQuality.none,
  // filterQuality: FilterQuality.low,
  // filterQuality: FilterQuality.medium,
  // filterQuality: FilterQuality.high,
)
複製代碼

效果展現

FilterQuality.none（默認）	FilterQuality.low
FilterQuality.medium	FilterQuality.high

這裏不一樣的質量會採用不一樣的算法來處理渲染圖片，但效率和質量是成反比的，通常咱們不作設置處理，考慮好圖片的分辨率便可。

最後這裏再放一張官方的對比圖看看

總結

到這裏整個 Image 就聊完了，小小的一個 Image 就聊了 3 篇內容，裏面涉及到不少基礎的知識點，咱們也沒有特別展開的聊，就把一些經常使用的和優化的細節點聊了聊，就到這裏，若是以爲對你有幫助，記得關注我哦

源碼倉庫

基於 Flutter 🔥 最新版本

• Flutter Widgets 倉庫

參考連接

• Image (Flutter Widget of the Week)
• Flutter-Image

關注專欄

• 此文章已收錄到下面👇 的專欄，能夠直接關注
• 更多文章繼續閱讀｜系列文章持續更新

👏 歡迎點贊➕收藏➕關注，有任何問題隨時在下面👇評論，我會第一時間回覆哦