Flutter的图片缓存机制有问题(可能是我使用的版本1.12.13有问题)
网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了泰兴免费建站欢迎大家使用!
网络图片会默认缓存到本地,但是不管图片是不是完整的或者损坏的,导致页面在下次进入的时候会优先从缓存里读取图片。有些图片是没有加载完成的,或者损坏的,导致图片无法显示。UI效果就是显示成白色的。
一种解决方式:加载前或者退出后清理图片缓存
ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.clear();
缺点就是每次图片都想要从网络上获取,增加服务器负担
按照给定尺寸进行图片的解码,而不是解码整个图片的尺寸,用来减少内存的占用。
官方文档:
官方说明:
Instructs Flutter to decode the image at the specified dimensions instead of at its native size.
This allows finer control of the size of the image in ImageCache and is generally used to reduce the memory footprint of ImageCache .
The decoded image may still be displayed at sizes other than the cached size provided here.
使用:
三方库: cached_network_image 限2.5.0之后版本才可用
设定最大的缓存宽度和高度 this.maxWidthDiskCache 、 this.maxHeightDiskCache
使用:
从相册选取图片,展示时使用指定尺寸宽高进行处理。
使用三方库:
使用自定义 provider 来指定所需图片的宽高:
AssetEntityImageProvider 传入宽高和图片原图 AssetEntity 数据。
provider 中 key.entity.thumbDataWithSize 方法:
进入 entity 中 thumbDataWithSize 方法:
进入 _getThumbDataWithId 方法中,
进入getThumb:
调用iOS原生的获取图片方法,
进入 getThumbWithId 方法,
原生实现获取置顶宽高缩略图方法实现:
使用 iOS 原生类 PHImageManager 的
来获取缩略图。
flutter开发中,图片的引用是必不可少的,所以为了提高效率和精准度,我们需要对不同分辨率的手机使用相对应的切图图片,本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。
flutter中会首先根据系统的devicePixelRatio(每一个逻辑像素包含多少个原始像素,可以通过MediaQueryData.devicePixelRatio来得到)来找对应倍数的文件夹下的图片,如果没有对应倍数,找最接近的。
所以在flutter项目中,我们需要构建对应的倍数像素文件夹
之后再pubspec.yaml中,配置assets文件后就可以使用了(如使用"assets/images/jay.png",会自动适配该像素下最接近的jay图片)。
使用flutter-img-sync插件批量化处理,具体操作如下
目前还不能处理gif、webp等格式的图片,而且如果和上边介绍的不同像素比适配方案一起使用的话,由于进行了精准定位,所以指定图片后就不能进行像素适配,这是目前还存在的较大问题,所以目前两者方案只能暂时取一使用。
一. flutter中我们想加载本地图片,需要两步:
二. flutter项目中本地图片加载的原理
在加载图片时,系统自动会根据屏幕分辨率优先选择到符合自己分配率的文件夹(2.0x或者3.0x或者4.0x)下去取相对应的图片,如果当前文件夹下没有,则会到低一倍的文件夹下去,如果还没有,则继续向更低一倍去取。(比如:iOS 5.5英寸及以上屏幕会优先选择去3.0x下去取图片,如果3.0x不存在或者3.0x文件夹下没有,则去2.0x下取;如果2.0x不存在或者2.0x下没有,则去1.0x下取;1.0x下再没有,则在images文件下取)。
先上图(样式自己调整)
1.新建小部件
根据实际情况修改以下部分内容;
2.使用(index 为当前点击图片的下标,)
图片加载过程是由ImageProvider触发的。而ImageProvider表示异步获取图片数据的操作,可以从资源,网络,文件等不同的渠道获取。
首先,ImageProvider根据_ImageState中传递的图片配置生成对应的图片缓存key,然后去ImageCache中查找是否由对应的图片缓存,如果有,通知刷新对应的UI;如果没有通过ImageStream异步加载,加载完成后更新缓存,然后通知_ImageState刷新UI。
ImageCache采用的是LRU(Least Recently Used)