Flutter中如何实现网络图片缓存 避免列表滚动时重复加载？

1. 图片缓存实现 #

原生NetworkImage仅支持内存缓存，当组件滚出可视区域被回收后，再次进入可视区会重新发起图片请求，耗时高。我们可以使用支持磁盘持久化缓存的图片组件替换原生实现：

步骤1：引入依赖 #

在pubspec.yaml的dependencies节点下添加：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.0

步骤2：替换原有图片加载逻辑 #

将原来的NetworkImage替换为CachedNetworkImageProvider，修改build方法中的图片部分代码：

Container(
  height: 160,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15),
    image: DecorationImage(
      // 替换此处即可，组件会自动做内存+磁盘缓存，同url图片只会下载一次
      image: CachedNetworkImageProvider(product.imgUrl),
      fit: BoxFit.cover,
    )
  ),
  // 可选添加加载占位、加载错误兜底
  child: Stack(
    children: [
      Positioned.fill(child: Center(child: CircularProgressIndicator(strokeWidth: 2))),
      Positioned.fill(child: CachedNetworkImage(
        imageUrl: product.imgUrl,
        fit: BoxFit.cover,
        placeholder: (context, url) => SizedBox.shrink(),
        errorWidget: (context, url, error) => Icon(Icons.broken_image, size: 40, color: Colors.grey),
      ))
    ],
  ),
)

2. 商品接口数据缓存实现 #

如果需要避免重复请求商品列表接口，可通过内存缓存+磁盘缓存实现，以下是最简内存缓存实现方案：

步骤1：定义全局缓存容器 #

在请求方法所在的文件中定义缓存map：

// 按分类id缓存商品列表，key为请求的分类id，value为对应的商品列表
final Map<int, List<Product>> _productCache = {};

步骤2：修改请求方法，优先走缓存 #

Future<List<Product>> getProducts(int id) async {
  // 先查缓存，有数据直接返回
  if (_productCache.containsKey(id) && _productCache[id]!.isNotEmpty) {
    return _productCache[id]!;
  }
  // 无缓存发起请求
  var response = await http.get(Uri.parse('...'));
  final products = jsonDecode(response.body).cast<Map<String, dynamic>>();
  List<Product> list = products.map<Product>((json) => Product.fromJson(json)).toList();
  // 请求成功写入缓存
  _productCache[id] = list;
  return list;
}

如果需要实现应用重启后依然不重复请求，可将商品列表序列化后存储到本地持久化组件中，启动时先读取本地缓存即可。

内容的提问来源于stack exchange，提问作者Pryby