扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一. 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文件下取)。
flutter开发中,图片的引用是必不可少的,所以为了提高效率和精准度,我们需要对不同分辨率的手机使用相对应的切图图片,本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。
flutter中会首先根据系统的devicePixelRatio(每一个逻辑像素包含多少个原始像素,可以通过MediaQueryData.devicePixelRatio来得到)来找对应倍数的文件夹下的图片,如果没有对应倍数,找最接近的。
所以在flutter项目中,我们需要构建对应的倍数像素文件夹
之后再pubspec.yaml中,配置assets文件后就可以使用了(如使用"assets/images/jay.png",会自动适配该像素下最接近的jay图片)。
使用flutter-img-sync插件批量化处理,具体操作如下
目前还不能处理gif、webp等格式的图片,而且如果和上边介绍的不同像素比适配方案一起使用的话,由于进行了精准定位,所以指定图片后就不能进行像素适配,这是目前还存在的较大问题,所以目前两者方案只能暂时取一使用。
按照给定尺寸进行图片的解码,而不是解码整个图片的尺寸,用来减少内存的占用。
官方文档:
官方说明:
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 的
来获取缩略图。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流