flutter加载本地图片，flutter 加载图片

Flutter图片加载与缓存

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

根据不同的数据来源，派生出不同的 ImageProvider ：

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

子类 NetworkImage 实现如下：

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

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

codec 为 _loadAsync 方法返回值，

_loadAsync 方法实现：

decode 方法的类型：

其中解码传入的回调方法 image_provider.DecoderCallback decode ，

传入 Uint8List ，返回 Futureui.Codec 。

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

resolveStreamForKey 和 resolve 实现如下：

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

ui.instantiateImageCodec 实现：

descriptor.instantiateCodec 方法实现：

_instantiateCodec 方法的实现，最终到了 native 的实现：

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

obtainKey 方法：

ImageProvider 定义了一个抽象方法 FutureT 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提供的方法来设置：

相关问答

Q1: Flutter Image图片加载流程

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

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

ImageCache采用的是LRU（Least Recently Used）

Q2: 详解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文件下取)。

Q3: flutter开发中一些技巧和坑点

在Dart中，当你不需要去改变一个变量的时候，应该使用final或者const，而不是使用var去声明一个变量。一个final变量只允许被赋值一次，必须在定义时或者构造函数参数表中将其初始化。

const所修饰的是编译时常量，我们在编译时就已经知道了它的值，它的值是不可改变的。

const比final更加严格，看以下例子：

对于表达式：

如果tar为null或tar[a]为null或tars(b)的值为null，都会导致表达式为null。

实现跳转到广告按back返回是主界面

如何强制竖屏

在线上的app,如果flutter报错，那一片红可是非常的辣眼睛，给用户的体验也很不好，其实我们可以自定义错误页面

在Flutter中，加载本地图片会存在一个加载过程。比如点击图标做图标的切换时，那么首次会发生闪动的情况。尤其是做类似引导页这类需求是，通过左右滑动切换图片时会发生比较明显的白屏一闪而过。

解决方法很简单，就是使用 precacheImage ，它将图像预存到图像缓存中。如果图像稍后被使用，它会被加载得更快。

在iOS 13中遇到了http网页打不开的问题，添加以下文字到Info.plist

yourdomain.com 是你请求的链接的域名

flutter加载本地图片的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 加载图片、flutter加载本地图片的信息别忘了在本站进行查找喔。