Flutter 图片加载，纯干货

最新推荐文章于 2024-09-23 14:30:59 发布

元点三

最新推荐文章于 2024-09-23 14:30:59 发布

阅读量846

点赞数 22

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/m0_56175058/article/details/137031230

版权

本文深入探讨了Flutter中图片加载的流程，从`_resolveImage()`到`ImageStreamCompleter`，涉及`putIfAbsent`、`loadAsync`等关键方法。文章详细解释了`ImageProvider`的`resolve`过程，`ImageCache`的工作机制以及如何处理网络图片，包括从响应到转换为`Uint8List`再到`Codec`实例的步骤。此外，还提及了`MultiFrameImageStreamCompleter`在处理动画和静态图片帧中的作用。

摘要由CSDN通过智能技术生成

_updateInvertColors();
_resolveImage();//解析图片从这里开始
//设置和移除监听图片变化的回调
if (TickerMode.of(context))
_listenToStream();
else
_stopListeningToStream();
super.didChangeDependencies();
}

void _resolveImage() {
//根据 ImageConfiguration 调用 ImageProvider 的 resolve 函数获得 ImageStream 对象
final ImageStream newStream = widget.image.resolve(createLocalImageConfiguration(
context,
size: widget.width != null && widget.height != null ? Size(widget.width, widget.height) : null,
));
_updateSourceStream(newStream);
}
…
}

它的生命周期方法方法包括initState()、didChangeDependencies()、build()、deactivate()、dispose()、didUpdateWidget() 等等。当它插入到渲染树时，先调用initState()函数，再调用 didChangeDependencies()。代码中可以看到调用了方法 _resolveImage()，这个方法中创建了 ImageStream 的新对象 newStream 。widget.image 就是 ImageProvider，调用resolve方法，代码如下：

ImageStream resolve(ImageConfiguration configuration) {
final ImageStream stream = ImageStream();
T obtainedKey;
bool didError = false;
Future handleError(dynamic exception, StackTrace stack) async {
if (didError) {
return;
}
didError = true;
await null; // 等待事件轮询，以防侦听器被添加到图像流中。

final _ErrorImageCompleter imageCompleter = _ErrorImageCompleter();
stream.setCompleter(imageCompleter);
…
}

…

Future key;
try {
key = obtainKey(configuration);
} catch (error, stackTrace) {
return;
}
key.then((T key) {
obtainedKey = key;
final ImageStreamCompleter completer =
PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key), onError: handleError);
if (completer != null) {
stream.setCompleter(completer);
}
}).catchError(handleError);

return stream;

ImageStreamCompleter 用于管理 dart:ui 加载的类的基类。ImageStreams 的对象很少直接构造，而是由 ImageStreamCompleter 自动配置它。ImageStream 中的图片管理者 ImageStreamCompleter 通过方法创建，imageCache 是 Flutter 框架中实现的用于图片缓存的单例，它这 Dart 虚拟机加载时就已经创建。im

最低0.47元/天解锁文章