关于 Flutter 网络图片加载与缓存使用过程总结 ｜8月更文挑战

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

废话开篇：文章内容主要是在使用flutter插件过程中的一些总结。

步骤一、添加第三方插件依赖

添加插件库：

cached_network_image: ^3.0.0
复制代码

安装指令：

这里就遇到了一些问题，工程在引入网络缓存图片组件前已经添加了 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();
    }
  }
}
复制代码

好了，文章没有太多技术含量，纯属个人使用总结，或许有的朋友也会有过类似的思考。写下来，记录一下，代码拙劣，大神勿喷，如果对大家有帮助，更是深感欣慰。