Flutter开发中如何消除Asset资源图片调用时的加载等待时长

问题核心原因 #

你当前使用的Visibility组件默认在visible: false时会直接将子组件从Widget树中移除，此时对应的图片资源不会提前执行加载、解码流程，只有当isVis设为true、图片组件被挂载到树中时才会启动加载逻辑，因此会出现明显的加载耗时。

优化方案 #

方案1：调整Visibility组件配置 #

修改Visibility组件的参数，让不可见状态下依然保留子组件的状态，图片会提前完成加载，切换显示时直接渲染：

Widget _showAssetImage() {
  return Visibility(
    visible: isVis,
    // 新增参数，不可见状态下保留组件状态
    maintainState: true,
    // 如果需要保留组件占位就新增下面两个参数，不需要可以删除
    maintainSize: true,
    maintainAnimation: true,
    child: Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
          color: Colors.amber,
          image: DecorationImage(image: AssetImage('deer.jpg'))),
    ),
  );
}

方案2：主动预缓存图片（更适合大量图片场景） #

在页面初始化阶段就将后续要用到的图片资源提前加载到内存缓存中，需要显示时直接读取缓存，完全消除加载耗时。
在_MyHomePageState中重写initState方法，添加预缓存逻辑：

@override
void initState() {
  super.initState();
  // 提前预缓存指定图片
  precacheImage(const AssetImage('deer.jpg'), context);
}

这个方案不需要调整Visibility的配置，即使图片组件被暂时移除出树，下次挂载时也会直接读取缓存的解码后数据，瞬间显示。

大量图片场景的额外优化建议 #

• 可以在应用启动阶段就把高频用到的全局图片统一预缓存，避免每个页面单独处理
• 注意控制预缓存的图片总大小，避免占用过多内存导致应用被系统回收
• 如果使用网络图片，可使用本地缓存库提前将需要的图片缓存到本地，减少网络请求耗时

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