Flutter中ListView/GridView的Image.file滚动消失、设缓存参数后像素化如何解决

1. 滚动时本地图片消失问题 #

原因 #

GridView.builder默认会回收超出视口的子组件，Image.file的图片解码缓存采用LRU（最近最少使用）清理策略，当滚出视口的图片解码缓存被清理后，再次滚动到对应位置就会触发重新加载，表现为图片消失。你设置的cacheExtent仅控制滚动预加载区域范围，不会修改图片缓存的留存规则，因此无法解决问题。

解决方案 #

有两种常用方案可以复刻CachedNetworkImage的缓存表现：

• 给每个图片组件绑定唯一的PageStorageKey，关联到对应图片的文件路径，避免滚动时组件状态被意外回收：

  ClipRRect(
    key: PageStorageKey(image.path), // 新增唯一key
    borderRadius: BorderRadius.circular(12.0),
    child: Image.file(
      File(image.path),
      fit: BoxFit.cover,
    ),
  )
  

• 直接使用cached_network_image库加载本地文件，复用其成熟的缓存逻辑，本地文件路径前添加file://前缀即可：

  CachedNetworkImage(
    imageUrl: 'file://${image.path}',
    fit: BoxFit.cover,
    borderRadius: BorderRadius.circular(12),
  )
  

2. 图片像素化问题 #

原因 #

cacheWidth和cacheHeight接收的是物理像素值，你之前的写法仅传入了逻辑像素宽高，没有乘以设备像素比，导致解码出来的图片分辨率远低于设备屏幕的实际物理像素需求，因此会出现像素化模糊的问题。

解决方案 #

取当前上下文的设备像素比，乘上逻辑宽高后再赋值给缓存参数即可：

Image.file(
  File(image.path),
  fit: BoxFit.cover,
  // 乘当前设备的像素比，匹配物理像素需求
  cacheWidth: (constraints.biggest.width * MediaQuery.of(context).devicePixelRatio).ceil(),
  cacheHeight: (constraints.biggest.height * MediaQuery.of(context).devicePixelRatio).ceil(),
)

该方案既可以避免原图尺寸过大导致内存占用过高、缓存被清理的问题，也能保证图片显示清晰度符合屏幕要求。

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