从最基础的Image加载网络图片方法开始：
Image(image: NetworkImage(url));
查看Image源码可以看到，Image是一个StatefulWidget。设置了一个必选参数image，类型为ImageProvider。
const Image({
Key key,
@required this.image,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
......
})
ImageProvider是一个抽象类，内部定义图片数据的获取和加载方法。主要有下面几个方法：
ImageStream resolve(ImageConfiguration configuration){
//返回的是一个图片stream数据流
...
}
Future<bool> evict({ ImageCache? cache, ImageConfiguration configuration = ImageConfiguration.empty }){
//缓存移除方法
...
}
//获取缓存资源key
Future<T> obtainKey(ImageConfiguration configuration);
//load数据方法
ImageStreamCompleter load(T key, DecoderCallback decode);
我们的例子中使用的是NetworkImage作为ImageProvider，找到NetworkImage的源码位置。看一看load方法时如何实现的：
@override
ImageStreamCompleter load(image_provider.NetworkImage key, image_provider.DecoderCallback decode) {
//chunkEvents用于传递数据的加载进度
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: () {
return <DiagnosticsNode>[
DiagnosticsProperty<image_provider.ImageProvider>('Image provider', this),
DiagnosticsProperty<image_provider.NetworkImage>('Image key', key),
];
},
);
}
可以看到，load方法最终返回的是一个ImageStreamCompleter的实现类。我们先看看他的构造方法，特别关注一下codec参数。
MultiFrameImageStreamCompleter({
required Future<ui.Codec> codec,
required double scale,
String? debugLabel,
Stream<ImageChunkEvent>? chunkEvents,
InformationCollector? informationCollector,
})
codec参数是一个Future<ui.Codec>的必选参数，Codec 是处理图片编解码的类的一个handler，查看其内部方法，可以发现均是native方法。官方注释提示说：此类为engine创建，请勿手动实例化。也就是说图片的编解码逻辑不是在Dart 代码部分实现，而是在flutter engine中实现的。
/// A handle to an image codec.
///
/// This class is created by the engine, and should not be instantiated
/// or extended directly.
///
/// To obtain an instance of the [Codec] interface, see
/// [instantiateImageCodec].
@pragma('vm:entry-point')
class Codec extends NativeFieldWrapperClass2 {
@pragma('vm:entry-point')
Codec._();
int get frameCount native 'Codec_frameCount';
int get repetitionCount native 'Codec_repetitionCount';
Future<FrameInfo> getNextFrame() {
return _futurize(_getNextFrame);
}
String _getNextFrame(_Callback<FrameInfo> callback) native 'Codec_getNextFrame';
void dispose() native 'Codec_dispose';
}
再回到NetworkImage.load方法，MultiFrameImageStreamCompleter创建时传递的codec参数由_loadAsync方法提供
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);
//通过HttpClient请求网络数据
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) {
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) {
scheduleMicrotask(() {
PaintingBinding.instance!.imageCache!.evict(key);
});
rethrow;
} finally {
chunkEvents.close();
}
}
现在再来看MultiFrameImageStreamCompleter。内部已经有了数据源和解码器，就看如何为image提供数据了。
void _handleCodecReady(ui.Codec codec) {
_codec = codec;
assert(_codec != null);
if (hasListeners) {
//这里了进入解码方法
_decodeNextFrameAndSchedule();
}
}
Future<void> _decodeNextFrameAndSchedule() async {
try {
_nextFrame = await _codec!.getNextFrame();
} catch (exception, stack) {
reportError(
context: ErrorDescription('resolving an image frame'),
exception: exception,
stack: stack,
informationCollector: _informationCollector,
silent: true,
);
return;
}
if (_codec!.frameCount == 1) {
//找到了发送图片帧方法
_emitFrame(ImageInfo(image: _nextFrame!.image, scale: _scale, debugLabel: debugLabel));
return;
}
_scheduleAppFrame();
}
当图片资源只有一帧的时候，会直接调用_emitFrame发送封装好的ImageInfo数据。
void _emitFrame(ImageInfo imageInfo) {
setImage(imageInfo);
_framesEmitted += 1;
}
@protected
void setImage(ImageInfo image) {
_currentImage = image;
if (_listeners.isEmpty)
return;
// Make a copy to allow for concurrent modification.
final List<ImageStreamListener> localListeners =
List<ImageStreamListener>.from(_listeners);
for (final ImageStreamListener listener in localListeners) {
try {
listener.onImage(image, false);
} catch (exception, stack) {
reportError(
context: ErrorDescription('by an image listener'),
exception: exception,
stack: stack,
);
}
}
}
这里可以看到，setImage内部会通过listener监听将数据回传。那listener是什么时候设置的呢？
之前有说到，image是一个StatefulWidget。查看内部的_ImageState的didChangeDependencies方法
@override
void didChangeDependencies() {
_updateInvertColors();
_resolveImage();
if (TickerMode.of(context))
//设置数据流监听
_listenToStream();
else
_stopListeningToStream();
super.didChangeDependencies();
}
void _listenToStream() {
if (_isListeningToStream)
return;
//这里便又回到了image_stream的listener设置
_imageStream.addListener(_getListener());
_isListeningToStream = true;
}
最终会在监听中调用setDate方法更新图片信息，完成一次图片的加载。
//帧返回处理
void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
setState(() {
_imageInfo = imageInfo;
_loadingProgress = null;
_frameNumber = _frameNumber == null ? 0 : _frameNumber + 1;
_wasSynchronouslyLoaded |= synchronousCall;
});
}
//进度返回处理
void _handleImageChunk(ImageChunkEvent event) {
assert(widget.loadingBuilder != null);
setState(() {
_loadingProgress = event;
});
}
