欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netFlutter cached_network_image 在 OpenHarmony 上的图片缓存实践与问题排查前言最近在做 Flutter for OpenHarmony 项目时图片加载这块确实踩了不少坑。项目里有很多商品封面Banner用户头像长图详情页一开始直接用的是Image.network()开发阶段看起来没什么问题。但真正放到鸿蒙设备上跑一段时间后问题慢慢就出来了图片闪烁滑动列表掉帧图片重复加载页面偶发白屏弱网下体验很差尤其是列表快速滑动的时候体验会明显下降。后面我把项目里的网络图片全部切换成了cached_network_image同时又针对 OpenHarmony 做了一些额外优化整体效果稳定了很多。这篇文章主要记录一下这次图片缓存优化过程。一、为什么不建议直接用 Image.network先看最基础的写法。Image.network(imageUrl)Flutter 官方确实提供了这个组件。但在实际项目里它更适合demo小项目图片数量少的页面如果页面图片很多问题会逐渐明显。我遇到的几个问题1. 图片重复请求列表上下滑动后同一张图片会再次请求。尤其在 OpenHarmony 上频繁请求会明显影响流畅度。2. 图片加载闪烁页面切换时图片会出现短暂空白。体验会比较差。3. 弱网场景体验差如果网络不好整个列表会疯狂转圈。没有占位图的话页面会显得特别乱。二、接入 cached_network_image后面我改成了dependencies: cached_network_image: ^3.3.1然后执行flutter pub get三、基础使用方式替换代码其实很简单。原来的写法Image.network( imageUrl, fit: BoxFit.cover, )替换后CachedNetworkImage( imageUrl: imageUrl, fit: BoxFit.cover, )仅这一层替换就已经能减少很多重复加载问题。四、一定要加 placeholder这是我后面总结出来很重要的一点。不加占位图的问题如果图片加载稍慢页面会先显示空白。尤其 OpenHarmony 真机里这种闪烁会比较明显。推荐写法CachedNetworkImage( imageUrl: imageUrl, placeholder: (context, url) { return Container( height: 100, alignment: Alignment.center, child: const CircularProgressIndicator(), ); }, fit: BoxFit.cover, )这样用户至少知道页面正在加载。五、错误占位图也很重要这个问题我是在测试环境里发现的。因为测试接口偶尔会返回失效图片。结果页面直接出现Exception caught by image resource service而且有些图片区域会直接空掉。后来的处理方式CachedNetworkImage( imageUrl: imageUrl, errorWidget: (context, url, error) { return const Icon( Icons.image_not_supported, ); }, )这样即使图片失败页面布局也不会乱。六、OpenHarmony 下的一个实际问题这里有个我在鸿蒙设备上真实遇到的问题。问题现象页面第一次打开图片正常。切后台再回来部分图片偶发不显示。但Android 正常iOS 正常只有 OpenHarmony 比较容易复现。排查过程一开始我怀疑网络权限图片格式缓存路径后面查了很久发现问题主要还是图片组件 rebuild 太频繁。最后的优化方案我给列表 Item 增加了const同时避免父组件频繁 setState。例如const GoodsItem()优化后图片白屏问题明显减少。七、列表场景一定要控制图片尺寸这个问题很多人容易忽略。错误写法CachedNetworkImage( imageUrl: imageUrl, )如果不限制尺寸Flutter 会动态计算布局。大量图片时GPU 压力会明显增加。推荐写法SizedBox( width: 120, height: 120, child: CachedNetworkImage( imageUrl: imageUrl, fit: BoxFit.cover, ), )在 OpenHarmony 真机上流畅度会好很多。八、长列表里的图片优化商品列表是我这次优化里问题最多的部分。问题列表快速滑动时会出现图片加载跟不上页面掉帧滚动卡顿后来的处理1. ListView.builderListView.builder( itemBuilder: (_, index) { return GoodsItem(); }, )避免一次性创建大量图片组件。2. 减少 rebuild我把点赞状态收藏状态价格变化单独拆成局部 Widget。避免整个 Item 重建。3. RepaintBoundary复杂 ItemRepaintBoundary( child: GoodsItem(), )这个优化在鸿蒙设备上效果挺明显。九、缓存清理问题这个是后面项目上线后遇到的。问题现象长时间使用后缓存越来越大。部分低端设备会开始出现页面变慢图片加载延迟解决方案我后来增加了缓存清理。await DefaultCacheManager().emptyCache();例如退出登录清理缓存按钮时主动执行。十、弱网环境测试这个我建议一定要做。因为 OpenHarmony 真机在弱网环境下图片体验会比 Android 更容易暴露问题。我测试的方法直接限制网络3G弱 WiFi高延迟然后观察图片闪烁页面布局滑动流畅度最终优化结果优化前问题表现图片闪烁明显图片白屏偶发列表掉帧存在重复请求高频优化后项目效果图片缓存稳定页面流畅度提升明显图片失败处理更完善弱网体验更稳定十一、总结这次做 Flutter for OpenHarmony 图片优化一个比较深的感受是图片问题很多时候不只是“图片组件”的问题。真正影响体验的其实是Widget rebuild列表结构图片尺寸缓存策略页面刷新机制cached_network_image确实帮我解决了不少问题。但如果页面结构本身不合理即使加缓存效果也有限。目前我项目里已经基本统一网络图片全部缓存统一 placeholder统一 errorWidget长列表全部懒加载整体体验已经稳定很多。后面我还准备继续研究Flutter 图片预加载OpenHarmony 图片缓存目录WebP 在鸿蒙下的性能大图长图优化方案希望这篇文章能给正在做 Flutter for OpenHarmony 开发的同学一点参考。
Flutter cached_network_image 在 OpenHarmony 上的图片缓存实践与问题排查
发布时间：2026/5/19 21:55:21
欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netFlutter cached_network_image 在 OpenHarmony 上的图片缓存实践与问题排查前言最近在做 Flutter for OpenHarmony 项目时图片加载这块确实踩了不少坑。项目里有很多商品封面Banner用户头像长图详情页一开始直接用的是Image.network()开发阶段看起来没什么问题。但真正放到鸿蒙设备上跑一段时间后问题慢慢就出来了图片闪烁滑动列表掉帧图片重复加载页面偶发白屏弱网下体验很差尤其是列表快速滑动的时候体验会明显下降。后面我把项目里的网络图片全部切换成了cached_network_image同时又针对 OpenHarmony 做了一些额外优化整体效果稳定了很多。这篇文章主要记录一下这次图片缓存优化过程。一、为什么不建议直接用 Image.network先看最基础的写法。Image.network(imageUrl)Flutter 官方确实提供了这个组件。但在实际项目里它更适合demo小项目图片数量少的页面如果页面图片很多问题会逐渐明显。我遇到的几个问题1. 图片重复请求列表上下滑动后同一张图片会再次请求。尤其在 OpenHarmony 上频繁请求会明显影响流畅度。2. 图片加载闪烁页面切换时图片会出现短暂空白。体验会比较差。3. 弱网场景体验差如果网络不好整个列表会疯狂转圈。没有占位图的话页面会显得特别乱。二、接入 cached_network_image后面我改成了dependencies: cached_network_image: ^3.3.1然后执行flutter pub get三、基础使用方式替换代码其实很简单。原来的写法Image.network( imageUrl, fit: BoxFit.cover, )替换后CachedNetworkImage( imageUrl: imageUrl, fit: BoxFit.cover, )仅这一层替换就已经能减少很多重复加载问题。四、一定要加 placeholder这是我后面总结出来很重要的一点。不加占位图的问题如果图片加载稍慢页面会先显示空白。尤其 OpenHarmony 真机里这种闪烁会比较明显。推荐写法CachedNetworkImage( imageUrl: imageUrl, placeholder: (context, url) { return Container( height: 100, alignment: Alignment.center, child: const CircularProgressIndicator(), ); }, fit: BoxFit.cover, )这样用户至少知道页面正在加载。五、错误占位图也很重要这个问题我是在测试环境里发现的。因为测试接口偶尔会返回失效图片。结果页面直接出现Exception caught by image resource service而且有些图片区域会直接空掉。后来的处理方式CachedNetworkImage( imageUrl: imageUrl, errorWidget: (context, url, error) { return const Icon( Icons.image_not_supported, ); }, )这样即使图片失败页面布局也不会乱。六、OpenHarmony 下的一个实际问题这里有个我在鸿蒙设备上真实遇到的问题。问题现象页面第一次打开图片正常。切后台再回来部分图片偶发不显示。但Android 正常iOS 正常只有 OpenHarmony 比较容易复现。排查过程一开始我怀疑网络权限图片格式缓存路径后面查了很久发现问题主要还是图片组件 rebuild 太频繁。最后的优化方案我给列表 Item 增加了const同时避免父组件频繁 setState。例如const GoodsItem()优化后图片白屏问题明显减少。七、列表场景一定要控制图片尺寸这个问题很多人容易忽略。错误写法CachedNetworkImage( imageUrl: imageUrl, )如果不限制尺寸Flutter 会动态计算布局。大量图片时GPU 压力会明显增加。推荐写法SizedBox( width: 120, height: 120, child: CachedNetworkImage( imageUrl: imageUrl, fit: BoxFit.cover, ), )在 OpenHarmony 真机上流畅度会好很多。八、长列表里的图片优化商品列表是我这次优化里问题最多的部分。问题列表快速滑动时会出现图片加载跟不上页面掉帧滚动卡顿后来的处理1. ListView.builderListView.builder( itemBuilder: (_, index) { return GoodsItem(); }, )避免一次性创建大量图片组件。2. 减少 rebuild我把点赞状态收藏状态价格变化单独拆成局部 Widget。避免整个 Item 重建。3. RepaintBoundary复杂 ItemRepaintBoundary( child: GoodsItem(), )这个优化在鸿蒙设备上效果挺明显。九、缓存清理问题这个是后面项目上线后遇到的。问题现象长时间使用后缓存越来越大。部分低端设备会开始出现页面变慢图片加载延迟解决方案我后来增加了缓存清理。await DefaultCacheManager().emptyCache();例如退出登录清理缓存按钮时主动执行。十、弱网环境测试这个我建议一定要做。因为 OpenHarmony 真机在弱网环境下图片体验会比 Android 更容易暴露问题。我测试的方法直接限制网络3G弱 WiFi高延迟然后观察图片闪烁页面布局滑动流畅度最终优化结果优化前问题表现图片闪烁明显图片白屏偶发列表掉帧存在重复请求高频优化后项目效果图片缓存稳定页面流畅度提升明显图片失败处理更完善弱网体验更稳定十一、总结这次做 Flutter for OpenHarmony 图片优化一个比较深的感受是图片问题很多时候不只是“图片组件”的问题。真正影响体验的其实是Widget rebuild列表结构图片尺寸缓存策略页面刷新机制cached_network_image确实帮我解决了不少问题。但如果页面结构本身不合理即使加缓存效果也有限。目前我项目里已经基本统一网络图片全部缓存统一 placeholder统一 errorWidget长列表全部懒加载整体体验已经稳定很多。后面我还准备继续研究Flutter 图片预加载OpenHarmony 图片缓存目录WebP 在鸿蒙下的性能大图长图优化方案希望这篇文章能给正在做 Flutter for OpenHarmony 开发的同学一点参考。
