Flutter中GridView使用Image.file加载本地图片滚动重复加载白屏如何解决？

• GridView.builder默认会回收离屏区域的item，滚动回到对应位置时会重新执行itemBuilder，而Image.file默认没有对本地文件的解码结果做持久化内存缓存，每次重新构建都会重新读取文件、解码，所以出现白屏间隙。
• 你设置了shrinkWrap: true+NeverScrollableScrollPhysics，会导致GridView一次性渲染所有item，若图片数量较多，所有图片同时解码加载会直接占用大量内存，你手动缓存Image组件的操作进一步放大了内存占用，最终触发系统内存限制报错stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY flutter。

1. 移除不必要的全量渲染配置
   如果不需要将GridView嵌在其他滚动组件内，直接删除physics: NeverScrollableScrollPhysics()和shrinkWrap: true两行代码，让GridView自身处理滚动和item回收，避免一次性加载所有图片。
   如果必须嵌套在其他滚动组件内，将GridView替换为SliverGrid，放在CustomScrollView的slivers数组中，保证列表item的复用逻辑正常生效。

2. 给Image.file添加缓存参数
   给Image.file添加cacheWidth、cacheHeight参数，按照实际显示的尺寸预先压缩图片再解码缓存，大幅降低内存占用，同时Flutter会自动将压缩后的解码结果缓存到全局图片缓存，下次构建时直接读取缓存，不会重复加载：

child: GridView.builder(
  itemCount: paths.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    childAspectRatio: 0.5,
    crossAxisSpacing: 6,
    mainAxisSpacing: 6,
    crossAxisCount: 5,
  ),
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () => remove(paths[index]),
      child: Image.file(
        File(paths[index]),
        key: ValueKey(paths[index]), // 固定key避免不必要的重绘
        cacheWidth: 140, // 按实际显示宽度的2倍设置即可，适配视网膜屏
        fit: BoxFit.cover,
      ),
    );
  },
),

如果需要调整全局图片缓存的上限，可以在应用初始化时添加以下配置：

PaintingBinding.instance.imageCache.maximumSize = 200; // 最多缓存200张图片
PaintingBinding.instance.imageCache.maximumSizeBytes = 100 * 1024 * 1024; // 缓存上限100MB

3. 避免手动缓存Image组件
   不需要自行封装LruCache缓存Image widget，Flutter自带的imageCache已经做了图片解码数据的缓存逻辑，手动缓存widget反而会导致内存无法正常释放，加重内存负担。

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