美文网首页
Flutter完整开发实战详解(十、 深入图片加载流程)

Flutter完整开发实战详解(十、 深入图片加载流程)

作者: woshishui1243 | 来源:发表于2020-08-30 20:55 被阅读0次

————————————————————文章来源:恋猫de小郭-Flutter完整开发实战详解
Flutter 的图片加载流程其实“并不复杂”,具体可点击下方大图查看,以网络图片加载为例子,先简单总结,其中主要流程是:

1、首先 Image 通过 ImageProvider 得到 ImageStream 对象
2、然后 _ImageState 利用 ImageStream 添加监听,等待图片数据
3、接着 ImageProvider 通过 load 方法去加载并返回 ImageStreamCompleter 对象
4、然后 ImageStream 会关联 ImageStreamCompleter
5、之后 ImageStreamCompleter 会通过 http 下载图片,再经过 PaintingBinding 编码转化后,得到 ui.Codec 可绘制对象,并封装成 ImageInfo 返回
6、接着 ImageInfo 回调到 ImageStream 的监听,设置给 _ImageState build 的 RawImage 对象。
7、最后 RawImage 的 RenderImage 通过 paint 绘制 ImageInfo 中的 ui.Codec

作者:恋猫de小郭
链接:https://juejin.im/post/6844903817918545928
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Flutter图片加载流程
在 Flutter 的图片的加载流程中,主要有三个角色:

Image :用于显示图片的 Widget,最后通过内部的 RenderImage 绘制。
ImageProvider:提供加载图片的方式如 NetworkImage 、FileImage 、MemoryImage 、AssetImage 等,从而获取 ImageStream ,用于监听结果。
ImageStream:图片的加载对象,通过 ImageStreamCompleter 最后会返回一个 ImageInfo ,而 ImageInfo 内包含有 RenderImage 最后的绘制对象 ui.Image 。

作者:恋猫de小郭
链接:https://juejin.im/post/6844903817918545928
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

网友评论

      本文标题:Flutter完整开发实战详解(十、 深入图片加载流程)

      本文链接:https://www.haomeiwen.com/subject/ypaesktx.html