快捷導(dǎo)航

Flutter 使用cached_image_network優(yōu)化圖片加載體驗(yàn)

更新時(shí)間：2021年05月28日 09:51:08 作者：島上碼農(nóng)

在 Flutter 中，cached_image_network 即提供了緩存網(wǎng)絡(luò)圖片功能，同時(shí)還提供了豐富的加載過(guò)程指示。本文就來(lái)看下cached_image_network的具體使用

在 App 中會(huì)經(jīng)常遇到需要從后臺(tái)拉取圖片的場(chǎng)景，這一方面會(huì)給服務(wù)器帶來(lái)網(wǎng)絡(luò)帶寬消耗，另一方面加載圖片的等待過(guò)程也會(huì)影響用戶體驗(yàn)。因此，往往會(huì)在 App 端對(duì)圖片做緩存機(jī)制，以避免同一張圖片反復(fù)發(fā)起請(qǐng)求。這個(gè)時(shí)候cached_image_network就派上用場(chǎng)了

上一篇Flutter 給列表增加下拉刷新和上滑加載更多功能，我們使用了列表，其中列表中有從網(wǎng)絡(luò)下載圖片。直接使用 Flutter 自帶的 Image.network 下載圖片一是無(wú)法緩存，二是體驗(yàn)不夠好。熟悉 iOS 的肯定知道 SDWebImage，即 Objective-C 上用得最廣泛的圖片緩存開(kāi)源組件。與 SDWebImage 類似，F(xiàn)lutter 的 cached_image_network 插件也實(shí)現(xiàn)了這樣的功能。cached_image_network 使用十分簡(jiǎn)單，首先在 pubspec.yaml 中添加依賴：

dependencies:
  flutter:
    sdk: flutter

  # ...其他依賴
  cached_network_image: ^3.0.0

之后在需要使用 cached_image_network 的地方引入源碼：

import 'package:cached_network_image/cached_network_image.dart';

最后在需要加載網(wǎng)絡(luò)圖片的地方使用cached_image_network 替代原有的圖片加載方式（如 Image.network）：

CachedNetworkImage(imageUrl: "http://via.placeholder.com/350x150"),

以上是 cached_image_network 最簡(jiǎn)單的用法，當(dāng)然為了用戶體驗(yàn)更好，推薦是使用占位圖或加載指示器的方式提示用戶圖片正在加載。

使用占位圖

CachedNetworkImage 提供了占位圖和加載失敗后的錯(cuò)誤指示的方法用于靜態(tài)指示。我們分別準(zhǔn)備 image-default.png 和 image-failed.png 文件表示默認(rèn)占位圖和加載失敗后的占位圖，然后用 CachedNetworkImage 構(gòu)造方法的 placeholder 和 errorWidget 來(lái)使用占位圖，如下所示：

Widget _imageWrapper(String imageUrl) {
    return SizedBox(
      width: 150,
      height: ITEM_HEIGHT,
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        placeholder: (context, url) => Image.asset('images/image-default.png'),
        errorWidget: (context, url, error) =>
           Image.asset('images/image-failed.png'),
      ),
    );
  }
}

使用進(jìn)度加載指示

也可以使用進(jìn)度加載指示器來(lái)指示加載進(jìn)度，加載進(jìn)度指示支持原型進(jìn)度和線型進(jìn)度。這種對(duì)于大圖預(yù)覽時(shí)會(huì)更為常用，代碼如下所示，其中LinearProgressIndicator是線型指示器，CircularProgressIndicator 是圓形指示器：

Widget _imageWrapper(String imageUrl) {
    return SizedBox(
      width: 150,
      height: ITEM_HEIGHT,
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        progressIndicatorBuilder: (context, url, downloadProgress) =>
            LinearProgressIndicator(value: downloadProgress.progress),
        errorWidget: (context, url, error) =>
            Image.asset('images/image-failed.png'),
      ),
    );
  }

效果

效果如下圖所示，下拉刷新后，可以先看到占位圖，然后逐漸過(guò)渡到加載成功的圖片。如果修改鏈接為一個(gè)非法鏈接或資源不存在的鏈接，則會(huì)顯示圖片加載失敗的占位圖。這種體驗(yàn)相比空白沒(méi)有任何指示的 Image.network好很多。

以上就是Flutter 使用cached_image_network優(yōu)化圖片加載體驗(yàn)的詳細(xì)內(nèi)容，更多關(guān)于Flutter 用cached_image_network優(yōu)化圖片加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: