Flutter图片内存占用过大问题

文章详细阐述了Flutter中图片加载的原理,涉及ImageProvider用于网络和本地图片加载,ImageStream管理和生命周期,以及ImageCache的缓存策略。同时介绍了优化策略,如设置缓存大小、本地磁盘缓存限制,以及解决Flutter内存占用大的方法——使用外接纹理技术。
摘要由CSDN通过智能技术生成

  图片(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对进行访问。

  • 13
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值