目录
Flutter原生支持在Image组件上显示网络图片，最简单的使用方式如下，调用Image的命名构造方法Image.network即可实现网络图片的下载显示。
Widget image = Image.network(imageUrl)；
那么，它内部是如何实现的呢？是否有做缓存处理或其他优化操作呢？带着疑问，我们一起来看下它的底层究竟是如何实现的。
一、从构造函数开始
我们以最简单的调用方式举例，当我们使用Image.network(imageUrl)这种方式来显示图片时，Image组件内部image属性就会被赋值NetworkImage。
// 此为简化过的Image组件类结构
class Image extends StatefulWidget {
Image.network(
String src,
) : image = NetworkImage(src);
// 图片数据处理的基类
final ImageProvider image;
}
这里引出了一个类叫NetworkImage，它是ImageProvider的子类，专门实现网络图片的下载和解析逻辑。当然你直接点进去看到的其实是个抽象类，并不是真正实现下载逻辑的地方，真正实现网络图片下载解析的在'_network_image_io.dart’这个文件下。构造函数知道这些就够了。接下来就看Image是在何时触发网络图片的下载的。
二、图片下载入口
Image是一个StatefulWidget，它又一个对应的State叫_ImageState。在这个_ImageState的生命周期中，控制着图片的下载过程。
State的生命周期可以简单的分为：构造函数 → initState → didChangeDependencies → build
因此，我们顺着这个顺序找，很快看到一个可疑的地方，didChangeDependencies中的_resolveImage方法。而TickerMode则是用于控制动画的，在这里被用于判断是否禁用了动画。关于TickerMode的相关介绍，可以看下这篇文章
// 完整源码
@override
void didChangeDependencies() {
_updateInvertColors();
// 处理图片的入口
_resolveImage();
// 当动画被禁用时，图片也是无法显示的，这个
if (TickerMode.of(context))
// 添加图片流处理的监听
_listenToStream();
else
_stopListeningToStream(keepStreamAlive: true);
super.didChangeDependencies();
}
我们进入到_resolveImage方法中去。
void _resolveImage() {
// ScrollAwareImageProvider包装了我们的NetworkImage
final ScrollAwareImageProvider provider = ScrollAwareImageProvider<Object>(
context: _scrollAwareContext,
imageProvider: widget.image,
);
// 新建图片流
final ImageStream newStream =
provider.resolve(createLocalImageConfiguration(
context,
size: widget.width != null && widget.height != null ? Size(widget.width!, widget.height!) : null,
));
assert(newStream != null);
// 更新图片流
_updateSourceStream(newStream);
}
_resolveImage方法就做了三件事。
1、用ScrollAwareImageProvider包装了NetworkImage
2、创建图片流对象ImageStream
3、更新图片流
2.1、ScrollAwareImageProvider
ScrollAwareImageProvider也是ImageProvider的子类，它的作用很简单，就是防止在快速滑动的时候加载图片，当存在快速滑动时，会将解析图片的工作放到下一帧处理。至于具体如何实现，我们放在后面再提。
2.2、ImageConfiguration
ImageConfiguration由方法createLocalImageConfiguration创建，保存了图片的基本配置信息，如Bundle，屏幕项目比devicePixelRatio，本地化local，尺寸size，平台platform等。
2.3、ImageStream
表示一个图片流，可以添加观察者ImageStreamCompleter来监听图片是否处理完成。一个图片流可以添加多个观察者。
ImageStream由provider的resolve方法调用后创建。通过源码可知，此处的provider就是ScrollAwareImageProvider对象。但是它内部并没有实现resolve方法，因此此处调用的是父类ImageProvider的resolve方法。
三、图片流和Key
以下代码截取自ImageProvider，并且删减了无关代码。
ImageStream resolve(ImageConfiguration configuration) {
// 创建流，这里直接调用了ImageStream的构造函数，并没有用到configuration
final ImageStream stream = createStream(configuration);
// 关键在这里，这里会根据configuration创建一个唯一key
_createErrorHandlerAndKey(
configuration,
// 成功的回调
(T key, ImageErrorListener errorHandler) {
resolveStreamForKey(configuration, stream, key, errorHandler);
},
// 下面是错误回调，可以不关注
(T? key, Object exception, StackTrace? stack) async {
await null; // wait an event turn in case a listener has been added to the image stream.
InformationCollector? collector;
if (stream.completer == null) {
stream.setCompleter(_ErrorImageCompleter());
}
stream.completer!.reportError(
exception: exception,
stack: stack,
context: ErrorDescription('while resolving an image'),
silent: true, // could be a network error or whatnot
informationCollector: collector,
);
},
);
return stream;
}
resolve方法的作用是创建图片流对象ImageStream，并根据传入的图片配置信息configuration，创建对应的Key，这个Key用于图片缓存。
那么这个key到底是怎么创建的呢，我们进入到_createErrorHandlerAndKey方法中查看。关键代码如下，已删除无关代码。
Future<T> key;
try {
key = obtainKey(configuration);
} catch (error, stackTrace) {
handleError(error, stackTrace);
return;
}
key.then<void>((T key) {
obtainedKey = key;
try {
successCallback(key, handleError);
} catch (error, stackTrace) {
handleError(error, stackTrace);
}
}).catchError(handleError);
可以看到方法实现中调用了ImageProvider的obtainKey方法，而这个方法在ImageProvider并没有具体实现，需要子类完成对应的实现。
Future<T> obtainKey(ImageConfiguration configuration);
还记得上文的分析不，我们说传入的imageProvider实例是ScrollAwareImageProvider对象，因此对应的实现也要到这个类中去查找。很快，我们找到obtainKey方法的实现，可以看到它做了个透传，具体是由它包装的类也就是NetworkImage来实现的。
@override Future<T> obtainKey(ImageConfiguration configuration) => imageProvider.obtainKey(configuration);
那么，我们就去NetworkImage找obtainKey。
注意下真正的NetworkImage实现是在_network_image_io.dart文件下的。
Future<NetworkImage> obtainKey(image_provider.ImageConfiguration configuration) {
return SynchronousFuture<NetworkImage>(this);
}
到这，我们就知道了NetworkImage的key为SynchronousFuture。
获取到key后的下一步就是调用_createErrorHandlerAndKey方法的successCallback回调。从而触发了下一个流程resolveStreamForKey。
_createErrorHandlerAndKey(
configuration,
(T key, ImageErrorListener errorHandler) {
// 拿到Key之后的回调
resolveStreamForKey(configuration, stream, key, errorHandler);
}
)
四、根据key来处理图片流
还是回到子类ScrollAwareImageProvider中，它重写了父类的resolveStreamForKey方法，前文提到，ScrollAwareImageProvider是用来防止列表在快速滑动的时候来加载图片的，那么它是如何实现的？我们就从resolveStreamForKey这个方法中来一探究竟。
// 以下代码已去掉无关逻辑
@override
void resolveStreamForKey(
ImageConfiguration configuration,
ImageStream stream,
T key,
ImageErrorListener handleError,
) {
// 滑动过快
if (Scrollable.recommendDeferredLoadingForContext(context.context!)) {
SchedulerBinding.instance!.scheduleFrameCallback((_) {
// 放入下一帧再尝试处理，如果下一帧还是过快，那么将一直被推迟
scheduleMicrotask(() => resolveStreamForKey(configuration, stream, key, handleError));
});
return;
}
// 当前可以加载，那么透传给包装的imageProvider来处理，这里是NetworkImage
imageProvider.resolveStreamForKey(configuration, stream, key, handleError);
}
Scrollable用于滑动组件，它有个方法叫recommendDeferredLoadingForContext，表示是否建议延迟加载。内部最终是根据滑动速度和当前设备的最大物理尺寸的边去比较，如果大于，表示速度过快，那么就建议延迟。具体逻辑在scroll_physics.dart文件下。这里不多做介绍。
一旦当前应用处于滑动状态，并且速度过快，那么，图片的加载将会被推迟到下一帧再进行尝试。因此我们说，当处于快速滑动时，图片是无法加载的。
当判断可以加载图片时，操作流将会被移交给被包装类imageProvider，这里是NetworkImage来处理。但是，NetworkImage没有实现resolveStreamForKey方法，因此最终还是跑到了ImageProvider类中的resolveStreamForKey方法下。
@protected
void resolveStreamForKey(ImageConfiguration configuration, ImageStream stream, T key, ImageErrorListener handleError) {
// 第一次进来还没有设置completer，因此不会进入这个分支中
if (stream.completer != null) {
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
() => stream.completer!,
onError: handleError,
);
assert(identical(completer, stream.completer));
return;
}
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
() => load(key, PaintingBinding.instance!.instantiateImageCodec),
onError: handleError,
);
if (completer != null) {
stream.setCompleter(completer);
}
}
当第一次加载网络图的时候，会直接走到下面这个逻辑中。这里涉及到一个很重要的类，ImageCache。它是做图片缓存用的。
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
() => load(key, PaintingBinding.instance!.instantiateImageCodec),
onError: handleError,
);
4.1、ImageCache
图片缓存类，只做了内存缓存。它由PaintingBinding持有，是一个单利。它的内部通过三个Map来缓存图片。
// 加载中的图片
final Map<Object, _PendingImage> _pendingImages = <Object, _PendingImage>{};
// 缓存中的图片
final Map<Object, _CachedImage> _cache = <Object, _CachedImage>{};
// 正在使用的图片
final Map<Object, _LiveImage> _liveImages = <Object, _LiveImage>{}
从图片缓存器中获取图片的逻辑集中在putIfAbsent方法中。以下代码已经去掉无关代码。
ImageStreamCompleter? putIfAbsent(Object key, ImageStreamCompleter Function() loader, { ImageErrorListener? onError }) {
TimelineTask? timelineTask;
TimelineTask? listenerTask;
ImageStreamCompleter? result = _pendingImages[key]?.completer;
// 正在加载，直接返回
if (result != null) {
return result;
}
// 这边有个小知识，dart中的Map是有顺序的，因此利用这点可以实现LRU算法。
// 最近用到了这图片，因此删除对应键值对，并更新，就能让它的位置处于前面
final _CachedImage? image = _cache.remove(key);
if (image != null) {
// 更新 _liveImages
_trackLiveImage(
key,
image.completer,
image.sizeBytes,
);
_cache[key] = image;
return image.completer;
}
final _LiveImage? liveImage = _liveImages[key];
if (liveImage != null) {
// 更新 _cache，这里还会根据最大缓存数量和大小来最限制
_touch(
key,
_CachedImage(
liveImage.completer,
sizeBytes: liveImage.sizeBytes,
),
timelineTask,
);
return liveImage.completer;
}
// 加载流程，这是个回调，由各ImageProvider子类来实现
try {
result = loader();
// 下载完更新 _liveImages
_trackLiveImage(key, result, null);
} catch (error, stackTrace) {
if (onError != null) {
onError(error, stackTrace);
return null;
} else {
rethrow;
}
}
bool listenedOnce = false;
_PendingImage? untrackedPendingImage;
// 设置图片加载监听，一旦加载完毕，那么会删除_pendingImages下对应的图片，并移除监听。同时更新_cache和_liveImages
void listener(ImageInfo? info, bool syncCall) {
int? sizeBytes;
if (info != null) {
sizeBytes = info.sizeBytes;
info.dispose();
}
final _CachedImage image = _CachedImage(
result!,
sizeBytes: sizeBytes,
);
_trackLiveImage(key, result, sizeBytes);
if (untrackedPendingImage == null) {
_touch(key, image, listenerTask);
} else {
image.dispose();
}
final _PendingImage? pendingImage = untrackedPendingImage ?? _pendingImages.remove(key);
if (pendingImage != null) {
pendingImage.removeListener();
}
listenedOnce = true;
}
// 设置加载监听，主要用来管理_pendingImages
final ImageStreamListener streamListener = ImageStreamListener(listener);
if (maximumSize > 0 && maximumSizeBytes > 0) {
_pendingImages[key] = _PendingImage(result, streamListener);
} else {
untrackedPendingImage = _PendingImage(result, streamListener);
}
result.addListener(streamListener);
return result;
}
4.2、 load
一旦在ImageCache中找不到缓存的图片，就会通过loader回调出来，走真正的下载流程。
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
// 本地图片找不到，需要去对应的ImageProvider子类里实现加载逻辑
() => load(key, PaintingBinding.instance!.instantiateImageCodec),
onError: handleError,
);
还是先看ScrollAwareImageProvider类，里面实现了load方法，并透传给了NetworkImage来实现。
@override ImageStreamCompleter load(T key, DecoderCallback decode) => imageProvider.load(key, decode);
在NetworkImage下，可以找到对应的load方法实现。里面有个_loadAsync方法，它就是我们要找的图片下载核心代码。
@override
ImageStreamCompleter load(image_provider.NetworkImage key, image_provider.DecoderCallback decode) {
final StreamController<ImageChunkEvent> chunkEvents = StreamController<ImageChunkEvent>();
// 多帧图片流管理器
return MultiFrameImageStreamCompleter(
// 核心异步加载逻辑
codec: _loadAsync(key as NetworkImage, chunkEvents, decode),
chunkEvents: chunkEvents.stream,
scale: key.scale,
debugLabel: key.url,
informationCollector: () => <DiagnosticsNode>[
DiagnosticsProperty<image_provider.ImageProvider>('Image provider', this),
DiagnosticsProperty<image_provider.NetworkImage>('Image key', key),
],
);
}
五、图片下载
饶了一大圈，终于来到了下载图片的地方了。可以看到下载图片的逻辑很简单，创建一个下载的http请求，设置header，下载图片。一旦下载成功，就会通过decode这个回调将图片的二进制数据返回出去decode(bytes)。
Future<ui.Codec> _loadAsync(
NetworkImage key,
StreamController<ImageChunkEvent> chunkEvents,
image_provider.DecoderCallback decode,
) async {
try {
assert(key == this);
final Uri resolved = Uri.base.resolve(key.url);
final HttpClientRequest request = await _httpClient.getUrl(resolved);
headers?.forEach((String name, String value) {
request.headers.add(name, value);
});
final HttpClientResponse response = await request.close();
if (response.statusCode != HttpStatus.ok) {
// The network may be only temporarily unavailable, or the file will be
// added on the server later. Avoid having future calls to resolve
// fail to check the network again.
await response.drain<List<int>>(<int>[]);
throw image_provider.NetworkImageLoadException(statusCode: response.statusCode, uri: resolved);
}
final Uint8List bytes = await consolidateHttpClientResponseBytes(
response,
onBytesReceived: (int cumulative, int? total) {
chunkEvents.add(ImageChunkEvent(
cumulativeBytesLoaded: cumulative,
expectedTotalBytes: total,
));
},
);
if (bytes.lengthInBytes == 0)
throw Exception('NetworkImage is an empty file: $resolved');
return decode(bytes);
} catch (e) {
// Depending on where the exception was thrown, the image cache may not
// have had a chance to track the key in the cache at all.
// Schedule a microtask to give the cache a chance to add the key.
scheduleMicrotask(() {
PaintingBinding.instance!.imageCache!.evict(key);
});
rethrow;
} finally {
chunkEvents.close();
}
}
而回调出去的这些二进制数据，是在MultiFrameImageStreamCompleter中被处理的。MultiFrameImageStreamCompleter是ImageStreamCompleter的子类，用于管理多帧图片的加载。
在MultiFrameImageStreamCompleter的构造方法中，我们可以看到它对codec做了回调处理。而这个codec就是前面提到的_loadAsync异步方法。
MultiFrameImageStreamCompleter({
required Future<ui.Codec> codec,
required double scale,
String? debugLabel,
Stream<ImageChunkEvent>? chunkEvents,
InformationCollector? informationCollector,
}) : assert(codec != null),
_informationCollector = informationCollector,
_scale = scale {
this.debugLabel = debugLabel;
// 这里处理了_loadAsync的回调
codec.then<void>(_handleCodecRead);
_handleCodecRead方法中回判断是否有观察者，有就进入解码流程。
void _handleCodecReady(ui.Codec codec) {
_codec = codec;
assert(_codec != null);
if (hasListeners) {
// 存在观察者，开始解码
_decodeNextFrameAndSchedule();
}
}
_decodeNextFrameAndSchedule方法可以看成是图片的解码方法，当然实际解码的地方位于更底层的Native。图片解码后会将信息保存在FrameInfo中，由_nextFrame持有。这里我们只考虑单帧图片，不考虑gif图。解码后的信息会被封装在ImageInfo中，其中image就是真正的图片数据。并调用_emitFrame方法，更新图片信息。而_emitFrame方法则主要是调用了setImage来通知观察者更新。我们直接看setImage方法即可。
Future<void> _decodeNextFrameAndSchedule() async {
_nextFrame?.image.dispose();
_nextFrame = null;
try {
// 解码得到一帧图片信息，保存在FrameInfo中
_nextFrame = await _codec!.getNextFrame();
} catch (exception, stack) {
return;
}
// 当帧图片就将数据封装在ImageInfo中回调出去
if (_codec!.frameCount == 1) {
if (!hasListeners) {
return;
}
_emitFrame(ImageInfo(
image: _nextFrame!.image.clone(),
scale: _scale,
debugLabel: debugLabel,
));
_nextFrame!.image.dispose();
_nextFrame = null;
return;
}
// 多帧则继续往下走
_scheduleAppFrame();
}
通过ImageStreamListener通知更新，刷新界面展示。
void setImage(ImageInfo image) {
_checkDisposed();
_currentImage?.dispose();
_currentImage = image;
if (_listeners.isEmpty)
return;
// Make a copy to allow for concurrent modification.
final List<ImageStreamListener> localListeners =
List<ImageStreamListener>.of(_listeners);
for (final ImageStreamListener listener in localListeners) {
try {
// 设置新图篇，通知更新界面展示
listener.onImage(image.clone(), false);
} catch (exception, stack) {
reportError(
context: ErrorDescription('by an image listener'),
exception: exception,
stack: stack,
);
}
}
}
说到这里，我们好像还没提到过什么时候设置的观察者，好，我们再次回到最初的入口，_ImageState组件的didChangeDependencies方法中。
六、添加观察者实现界面更新
这个观察者就是通过_listenToStream方法添加的。
@override
void didChangeDependencies() {
_updateInvertColors();
_resolveImage();
if (TickerMode.of(context))
// 添加观察者
_listenToStream();
else
_stopListeningToStream(keepStreamAlive: true);
super.didChangeDependencies();
}
并且在创建观察者ImageStreamListener的时候，设置了onImage的回调。
// 这里是获取观察者的入口
ImageStreamListener _getListener({bool recreateListener = false}) {
if(_imageStreamListener == null || recreateListener) {
_lastException = null;
_lastStack = null;
_imageStreamListener = ImageStreamListener(
// 这个就是onImage的回调
_handleImageFrame,
onChunk: widget.loadingBuilder == null ? null : _handleImageChunk,
onError: widget.errorBuilder != null || kDebugMode
? (Object error, StackTrace? stackTrace) {
setState(() {
_lastException = error;
_lastStack = stackTrace;
});
}
: null,
);
}
return _imageStreamListener!;
}
onImage的入参被设置了_handleImageFrame，因此当下载完图片后调用的就是_handleImageFrame方法。
void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
setState(() {
// 更新图片信息，实现图片加载
_replaceImage(info: imageInfo);
_loadingProgress = null;
_lastException = null;
_lastStack = null;
_frameNumber = _frameNumber == null ? 0 : _frameNumber! + 1;
_wasSynchronouslyLoaded = _wasSynchronouslyLoaded | synchronousCall;
});
}
void _replaceImage({required ImageInfo? info}) {
_imageInfo?.dispose();
_imageInfo = info;
}
到此，图片下载和更新的流程已经都串起来了。下载完的图片存放在ImageInfo中，在setState后，会被设置进RawImage组件中实现渲染。
总结
网络图片的加载逻辑可以分为以下几个步骤：
1、根据图片类型，生成对应的key
2、根据key去全局的ImageCache下查找图片缓存，命中则直接返回刷新
3、图片缓存没有命中，调用Http去下载图片
4、下载完图片后，将图片的二进制数据回调出去触发界面刷新，同时会做内存缓存
5、在RawImage中显示网络图片
