Flutter图片内存占用过大问题

图片(Image)加载原理:

Image

显示图⽚的Widget,通过ImageState管理ImageProvider的⽣命周期。

ImageProvider:

图⽚的抽象概念。 根据Image创建实例时调用的工厂方法的不同(Image.network或者Image.assetImage,使用ImageProvider的不同子类,如NetworkImage、AssetImage分别通过网络或本地获取图⽚字节数据(load)并进行解码,创建 ImageStream⽤于监听结果。图片的key为url+scale,⽤于描述图⽚的唯⼀以及是否已有缓存。

ImageStream:

图片load的目标对象。通过 ImageStreamCompleter 最后会返回⼀个 ImageInfo,⽽ImageInfo 中的ui.Image是RenderObject的⽬标绘制对象。

ImageCache:

图⽚缓存单例PaintingBinding.instance.imageCache(默认100MB或1000张图满⾜其⼀,就标记最先缓存的对象给释放其引用)

图片加载优化策略:

  1. 通过PaintingBinding.instance.imageCache设置图片缓存最大大小, 未显示图片及时调用evict方法释放。
  2. 使用Image.network时, 设置缓存的图片的宽高(cacheWidth、cacheHeight)
  3. 若要实现图片本地文件缓存,加尼亚使用第三方图片插件cached_network_image,在使用该组件时克设置图片磁盘缓存最大宽高(maxWidthDiskCache, maxHeightDiskCache), 以避免缓存过大的图片原图,造成不必要的内存及磁盘消耗。
  4. Flutter内存占用较大,还可能是因为另外一种原因:Native侧和Flutter侧都使用大量相同的图片,图片在两种环境中均被加载到内存。解决这一问题的方案是外接纹理。即图片在Native侧加载注册一个FlutterTexture对象,然后生成一个纹理id,Flutter侧通过Texture(id)根据纹理id对进行访问。
相关推荐
风华圆舞17 分钟前
MethodChannel 在 Flutter 与 ArkTS 之间是怎么工作的
flutter·华为·harmonyos
恋猫de小郭19 分钟前
Flutter 又为 AI 时代添砖加瓦:全新 ComponentLibrary 提议
android·前端·flutter
G_dou_23 分钟前
Flutter三方库适配OpenHarmony【prime_checker】质数检测器项目完整实战
flutter·harmonyos
G_dou_23 分钟前
Flutter三方库适配OpenHarmony【random_joke】随机笑话应用项目完整实战
flutter·harmonyos
MemoriKu28 分钟前
Flutter 相册 APP 视频模态稳定化实战:从远端重构冲突到真机 Smoke Test
人工智能·python·flutter·机器学习·重构·音视频·新人首发
风华圆舞39 分钟前
鸿蒙 Flutter 平台通道设计:为什么一项能力一个 channel
flutter·华为·harmonyos
BreezeDove41 分钟前
【Android】Flutter命令超时无响应问题
android·flutter
G_dou_1 小时前
Flutter三方库适配OpenHarmony【quote_of_day】每日名言应用项目完整实战
flutter·harmonyos
韩曙亮1 小时前
【Flutter】Flutter 编译 Web 网站 ① ( Tomcat 部署 Web 网站 )
前端·flutter·tomcat·web
G_dou_10 小时前
Flutter三方库适配OpenHarmony【countdown_timer】倒计时器项目完整实战
flutter·harmonyos