flutter图片预加载(flutter预览各种文件)

网友投稿 4420 2022-12-24

本篇文章给大家谈谈flutter图片预加载,以及flutter预览各种文件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享flutter图片预加载的知识,其中也会对flutter预览各种文件进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

Flutter Image图片加载流程

图片加载过程是由ImageProvider触发的。而ImageProvider表示异步获取图片数据的操作,可以从资源,网络,文件等不同的渠道获取。

首先,ImageProvider根据_ImageState中传递的图片配置生成对应的图片缓存key,然后去ImageCache中查找是否由对应的图片缓存,如果有,通知刷新对应的UI;如果没有通过ImageStream异步加载,加载完成后更新缓存,然后通知_ImageState刷新UI。

ImageCache采用的是LRU(Least Recently Used)

Flutter图片加载与缓存

其中,参数 image 类型为抽象类 ImageProvider ,定义了图片数据获取和加载的相关接口。

根据不同的数据来源,派生出不同的 ImageProvider :

抽象类 ImageProvider 提供了一个用于加载数据源的抽象方法 @protected ImageStreamCompleter load(T key, DecoderCallback decode); 接口,不同的数据源定义各自的实现。

子类 NetworkImage 实现如下:

load 方法返回类型为抽象类 ImageStreamCompleter ,其中定义了一些管理图片加载过程的接口,比如 addListener 、 removeListener 、 addOnLastListenerRemovedCallback 等, MultiFrameImageStreamCompleter 为其子类。

MultiFrameImageStreamCompleter 第一个参数 codec 类型为 Future<ui.Codec ,用来对突破进行解码,当 codec 准备好的时候,就会立即对图片第一帧进行解码操作。

codec 为 _loadAsync 方法返回值,

_loadAsync 方法实现:

decode 方法的类型:
其中解码传入的回调方法 image_provider.DecoderCallback decode ,

传入 Uint8List ,返回 Future<ui.Codec 。

而对 decode 回调方法的具体定义,在 ImageProvider 的 resolveStreamForKey 方法中做了定义, resolveStreamForKey 方法在 ImageProvider 的 resolve 方法中有调用, resolve 方法则为 ImageProvider 类层级结构的公共入口点。

resolveStreamForKey 和 resolve 实现如下:

decode 方法,即 PaintingBinding.instance!.instantiateImageCodec ,即为具体图片解码的方法实现。

ui.instantiateImageCodec 实现:

descriptor.instantiateCodec 方法实现:

_instantiateCodec 方法的实现,最终到了 native 的实现:

其中返回值类型 Codec 里定义了一些属性:

obtainKey 方法:
ImageProvider 定义了一个抽象方法 Future<T obtainKey(ImageConfiguration configuration); ,供子类来实现,其中 NetworkImage 的实现为:

obtainKey 作用:
配合实现图片缓存, ImageProvider 从数据源加载完数据后,会在 ImageCache 中缓存图片数据,图片数据缓存时一个 Map ,其中 Map 中的 key 便是 obtainKey 。

resolve 作为 ImageProvider 提供给 Image 的主入口方法,参数为 ImageConfiguration ,

resolve 其中调用了 _createErrorHandlerAndKey 方法,设置了成功回调和失败回调:

其中 _createErrorHandlerAndKey 方法的实现,便调用了 obtainKey 来设置 key 。

在成功回调里,调用了方法 resolveStreamForKey ,里面有具体的缓存实现 PaintingBinding.instance!.imageCache!.putIfAbsent :

PaintingBinding.instance!.imageCache 是ImageCache的一个实例,是 PaintingBinding 的一个属性,是一个单例,图片缓存是全局的。
如上述判断:

ImageCache 定义:

ImageCache 缓存池:

在 NetworkImage 中,对 ImageProvider 的抽象方法 obtainKey 进行了实现,将自己创建了一个同步 Future 进行返回:

同时,自身又重写了 ImageProvider 定义的 == 比较操作符,通过图片 url 和图片的缩放比例 scale 进行比较:

通过ImageCache提供的方法来设置:

Flutter 中不同分辨率的图片如何加载

1.说明:

我们都知道在使用 Android 原生开发 app 的时候不同分辨率的图片放置到下面对应的文件夹中:

但是使用 Flutter 开发 app 时却有不同,他们也有一个对应的关系,按照他们的对应关系建立文件夹就可以了,如下:

2.使用:

首先在 Flutter 项目根目录中创建一个 images 文件夹用来存放图片资源;

然后在项目目录下找到 pubspec.yaml 文件打开,声明图片资源;

如何加载不同分辨率的图呢,例如 android 中的 hdpi,xhdpi,xxhdpi 和 ios 中的 1x,2x,3x。只需要在 images 文件夹中在创建两个 2.0x,3.0x 文件夹用来存放 2x,3x 的图片资源:

如上图,1.0x 图片放到了 account 文件夹中,account 文件夹下又有 1.5x、2.0x、3.0x、4.0x 文件夹,分别存放对应分辨率的图片,这里要注意文件夹的对应关系。

使用图片时,只需要使用 account 文件夹下的图片就行了,系统会根据手机的分辨率,加载对应文件夹中的图片,如:

详解flutter中本地资源图片的使用

一. 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预览各种文件的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 flutter图片预加载的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于flutter预览各种文件、flutter图片预加载的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:智能车载终端是什么(汽车车载终端)
下一篇:小程序app模板(小程序模板制作软件)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~