關於 Flutter 網路圖片載入與快取使用過程總結 ｜8月更文挑戰

頭疼腦脹的程式碼搬運工發表於2021-08-11
Flutter快取

這是我參與8月更文挑戰的第4天，活動詳情檢視：8月更文挑戰

廢話開篇：文章內容主要是在使用flutter外掛過程中的一些總結。

步驟一、新增第三方外掛依賴

新增外掛庫：

cached_network_image: ^3.0.0
複製程式碼

安裝指令：

image.png

這裡就遇到了一些問題，工程在引入網路快取圖片元件前已經新增了 dio 網路依賴和 path_provider 本地儲存依賴， 但是 cached_network_image 也依賴了上面的兩個外掛，如果dio 和 path_provider的版本跟 cached_network_image 的版本不匹配會報錯，不過沒關係，報錯時終端會提示應載入的依賴元件的版本號，這裡根據提示修改好，再執行安裝外掛指令即可。

這裡將 dio 版本升級到 4.0.0 後發現之前到攔截器物件報錯，檢視版本後發現不但是攔截器物件的 onRequest、onResponse、onError方法的宣告引數變了，返回值也發生了變化，這裡記錄一下。

Interceptor dInter = InterceptorsWrapper(
  onRequest: (RequestOptions options,RequestInterceptorHandler handler){
    options.queryParameters.addAll({'token':'H+0At+PcIWLY1kjg4ws9gqzwsese9322B81ARjj2eMk='});
    //以前版本這裡只return options即可，現在需要返回 handler.next(options)
    return handler.next(options);
  },
  onResponse: (Response response,ResponseInterceptorHandler handler){
  //同理
    return handler.next(response);
  },
  onError: (DioError error,ErrorInterceptorHandler handler){
  //同理
    return handler.next(error);
  }
);
複製程式碼

步驟二、簡單封裝一下網路載入圖片元件

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class GeneralFadeInImage extends StatelessWidget {
  String image;
  BoxFit fit;
  String placeholder;
  double width;
  GeneralFadeInImage({required this.image,this.fit = BoxFit.fill,this.placeholder = 'assets/images/placeholderimg.png',this.width = 0});
  
  //載入網路圖片及快取
  Widget _cacheImage(){
    return (this.width == 0) ? CachedNetworkImage(
      imageUrl: this.image,
      fit: this.fit,
      placeholder: (context, url) => Image.asset(this.placeholder,fit: this.fit,),
      errorWidget: (context, url, error) =>
          Image.asset('images/image-failed.png'),
    ) : CachedNetworkImage(
      imageUrl: this.image,
      fit: this.fit,
      width: this.width,
      placeholder: (context, url) => Image.asset(this.placeholder,fit: this.fit,),
      errorWidget: (context, url, error) =>
          Image.asset('images/image-failed.png'),
    );
  }

  //載入網路圖片
  Widget _loadNetworkImage(){
    return (this.width == 0) ? new FadeInImage.assetNetwork(
        placeholder: this.placeholder,
        image: this.image,
        fit: this.fit,
        imageErrorBuilder: (context, error, stackTrace) {
          return Image.asset(this.placeholder,fit: this.fit,);
        }) : new FadeInImage.assetNetwork(
        placeholder: this.placeholder,
        width: this.width,
        image: this.image,
        fit: this.fit,
        imageErrorBuilder: (context, error, stackTrace) {
          return Image.asset(this.placeholder,fit: this.fit,width: this.width,);
        });
  }
  @override
  Widget build(BuildContext context) {
    return _cacheImage();
  }
}
複製程式碼

步驟三、使用操作

初始化必填項僅為網路圖片地址

new GeneralFadeInImage(image: url)
複製程式碼

最後封裝一個快取管理類，實現獲取快取圖片大小及清除快取圖片功能，ImageCache還可獲取快取圖片的數量、設定快取的圖片最大數量（預設是1000）等api。

import 'package:flutter/cupertino.dart';

class WSLCacheImageManager {
  //讀取圖片快取大小
  static String getAllSizeOfCacheImages(){
    ImageCache? imageCache = PaintingBinding.instance!.imageCache;
    String cacheSizeStr = '0 kb';
    if(imageCache != null) {
      int byte = imageCache.currentSizeBytes;
      if(byte >= 0 && byte < 1024) {
        cacheSizeStr = '$byte B';
      } if(byte >= 1024 && byte < 1024 * 1024) {
        double size = (byte * 1.0 / 1024);
        String sizeStr = size.toStringAsFixed(2);
        cacheSizeStr = '$sizeStr KB';
      }else {
        double size = (byte * 1.0 / 1024) / 1024;
        String sizeStr = size.toStringAsFixed(2);
        cacheSizeStr = '$sizeStr MB';
      }
    }
    return cacheSizeStr;
  }

  //清除所有圖片快取
  static void clearAllCacheImage(){
    ImageCache? imageCache = PaintingBinding.instance!.imageCache;
    if(imageCache != null) {
      imageCache.clear();
    }
  }
}
複製程式碼

好了，文章沒有太多技術含量，純屬個人使用總結，或許有的朋友也會有過類似的思考。寫下來，記錄一下，程式碼拙劣，大神勿噴，如果對大家有幫助，更是深感欣慰。

相關文章