Flutter圖片加載與緩存機(jī)制的深入探究
前言
今天來(lái)學(xué)習(xí)一下 Flutter 自身是如何加載圖片和管理圖片的。
Flutter 提供了一個(gè)圖片控件 Image，Image 定義了若干中加載圖片的方式，包括 Image.asset、Image.file、Image.network、Image.memory。
Image內(nèi)部維護(hù)了一個(gè) ImageProvider對(duì)象，ImageProvider則真正維護(hù)整個(gè)圖片加載的工作。Widget 本身內(nèi)部是體現(xiàn)在 RawImage中：
圖片控件
// Image
Widget result = RawImage(
image: _imageInfo?.image,
debugImageLabel: _imageInfo?.debugLabel,
width: widget.width,
height: widget.height,
scale: _imageInfo?.scale ?? 1.0,
color: widget.color,
colorBlendMode: widget.colorBlendMode,
fit: widget.fit,
alignment: widget.alignment,
repeat: widget.repeat,
centerSlice: widget.centerSlice,
matchTextDirection: widget.matchTextDirection,
invertColors: _invertColors,
isAntiAlias: widget.isAntiAlias,
filterQuality: widget.filterQuality,
);
return result;
這里可以看到 _imageInfo 決定 RawImage如何展示圖片。
_imageInfo 則會(huì)在圖片的每一幀進(jìn)行重新賦值：
// image.dart
void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
setState(() {
_imageInfo = imageInfo;
}
}
那么圖片信息是從哪里來(lái)的呢，它是由 _resolveImage 這個(gè)方法發(fā)起的。這個(gè)方法會(huì)在 _ImageState 的 didChangeDependencies、 didUpdateWidget和 reassemble方法進(jìn)行調(diào)用。
也就是控件發(fā)生變化刷新狀態(tài)的時(shí)候，就會(huì)重新去解析圖片。
圖片解析
_resolveImage 邏輯如下：
void _resolveImage() {
final ScrollAwareImageProvider provider = ScrollAwareImageProvider<dynamic>(
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,
));
_updateSourceStream(newStream);
}
這里會(huì)用 ScrollAwareImageProvider 包裝一下，ScrollAwareImageProvider 的功能我們后面會(huì)介紹，這里先跳過。
//ImageProvider# resolve
ImageStream resolve(ImageConfiguration configuration) {
_createErrorHandlerAndKey(configuration,(T key, ImageErrorListener errorHandler) {
resolveStreamForKey(configuration, stream, key, errorHandler);
},
(T? key, dynamic exception, StackTrace? stack) async {
await null; // wait an event turn in case a listener has been added to the image stream.
final _ErrorImageCompleter imageCompleter = _ErrorImageCompleter();
stream.setCompleter(imageCompleter);
InformationCollector? collector;
assert(() {
collector = () sync* {
yield DiagnosticsProperty<ImageProvider>('Image provider', this);
yield DiagnosticsProperty<ImageConfiguration>('Image configuration', configuration);
yield DiagnosticsProperty<T>('Image key', key, defaultValue: null);
};
return true;
}());
imageCompleter.setError(
exception: exception,
stack: stack,
context: ErrorDescription('while resolving an image'),
silent: true, // could be a network error or whatnot
informationCollector: collector,
);
}
);
}
resolve 方法調(diào)用 _createErrorHandlerAndKey 來(lái)處理圖片加載的異常情況。當(dāng)圖片正常加載的時(shí)候，會(huì)執(zhí)行 resolveStreamForKey。
//resolveStreamForKey
void resolveStreamForKey(ImageConfiguration configuration, ImageStream stream, T key, ImageErrorListener handleError) {
if (stream.completer != null) {
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
() => stream.completer!,
onError: handleError,
);
return;
}
final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
key,
() => load(key, PaintingBinding.instance!.instantiateImageCodec),
onError: handleError,
);
if (completer != null) {
stream.setCompleter(completer);
}
}
Flutter 會(huì)把圖片緩存相關(guān)的邏輯維護(hù)在 ImageCache這個(gè)對(duì)象。
緩存管理
ImageCache里面有 3 個(gè) map:
分別表示
- 正在加載的圖片
- 緩存在內(nèi)存的圖片
- 表示正活躍的圖片，Widget 狀態(tài)變化后可能會(huì)清空
新增緩存
新增緩存的時(shí)候會(huì)設(shè)置 map 的 key， key 由 ImageProvider 對(duì)象提供。例如：
- AssetImage 當(dāng)包名和bundle一樣的時(shí)候，key可以認(rèn)為是一樣的。
- NetworkImage 當(dāng)圖片 url 和比例一樣的時(shí)候，key可以認(rèn)為是一樣的。
ImageCache 實(shí)際上是一個(gè)單例對(duì)象。也就是 Flutter 的圖片緩存管理是全局的。ImageCache 最重要的方法就是 putIfAbsent：
// 整理過核心邏輯的代碼
ImageStreamCompleter? putIfAbsent(Object key, ImageStreamCompleter loader(), { ImageErrorListener? onError }) {
// 根據(jù)key從正在加載的map里獲取緩存，如果有直接返回
ImageStreamCompleter? result = _pendingImages[key]?.completer;
if (result != null) {
return result;
}
// 檢查內(nèi)存緩存，存在的話更新存活map
final _CachedImage? image = _cache.remove(key);
if (image != null) {
_trackLiveImage(key, _LiveImage(image.completer, image.sizeBytes, () => _liveImages.remove(key)));
_cache[key] = image;
return image.completer;
}
// 沒有緩存，從 _live 里面取
final _CachedImage? liveImage = _liveImages[key];
if (liveImage != null) {
// 更新緩存
_touch(key, liveImage, timelineTask);
return liveImage.completer;
}
// 3 個(gè) map 都沒有獲取到緩存的圖片
result = loader(); // 加載
_trackLiveImage(key, _LiveImage(result, null, () => _liveImages.remove(key)));
_PendingImage? untrackedPendingImage;
//定義一個(gè)listener
void listener(ImageInfo? info, bool syncCall) {
// 加載的監(jiān)聽
}
// 包裝一個(gè)listener
final ImageStreamListener streamListener = ImageStreamListener(listener);
if (maximumSize > 0 && maximumSizeBytes > 0) {
// 放入緩存
_pendingImages[key] = _PendingImage(result, streamListener);
} else {
untrackedPendingImage = _PendingImage(result, streamListener);
}
// 添加監(jiān)聽
result.addListener(streamListener);
return result;
}
listener 回調(diào)的邏輯：
在 Image 狀態(tài)改變的時(shí)候，會(huì)觸發(fā)對(duì) liveImages 的修改：
// Image
_imageStream.removeListener(_getListener());
// ImageStream
void removeListener(ImageStreamListener listener) {
for (final VoidCallback callback in _onLastListenerRemovedCallbacks) {
callback();
}
_onLastListenerRemovedCallbacks.clear();
}
而在 _trackLiveImage 的時(shí)候，_LiveImage 都注冊(cè)了上面的這個(gè) callback:
_trackLiveImage(key, _LiveImage(image.completer, image.sizeBytes, () => _liveImages.remove(key)));
這時(shí)候改圖片會(huì)從 _liveImages 里面移除。
由此可見，緩存的優(yōu)先級(jí)為 pending -> cache -> live -> load，圖片緩存和獲取的流程如下圖所示：
緩存清理
在更新緩存大小的時(shí)候，還會(huì)進(jìn)行緩存大小的檢查：
void _checkCacheSize(TimelineTask? timelineTask) {
while (_currentSizeBytes > _maximumSizeBytes || _cache.length > _maximumSize) {
final Object key = _cache.keys.first;
final _CachedImage image = _cache[key]!;
_currentSizeBytes -= image.sizeBytes!;
_cache.remove(key);
}
}
當(dāng)當(dāng)前緩存總?cè)萘看笥谧畲笕萘炕蛘呔彺鏀?shù)量大于最大數(shù)量的時(shí)候，就會(huì)進(jìn)行緩存的清理。
所以上面使用緩存的過程中，多次訪問的緩存就會(huì)把key往后放，避免一上來(lái)就被清理掉。
所以 Flutter 自身的緩存清理算法也是遵循了 “最近最少使用” 的。
圖片緩存的邏輯如下圖所示：
圖片加載
圖片加載主要依賴上面的 load方法進(jìn)行。不同的 ImageProvider 子類有自己的實(shí)現(xiàn)。例如
AssetImage
return MultiFrameImageStreamCompleter(
codec: _loadAsync(key, decode),
scale: key.scale,
debugLabel: key.name,
informationCollector: collector
);
NetworkImage
final StreamController<ImageChunkEvent> chunkEvents =
StreamController<ImageChunkEvent>();
return MultiFrameImageStreamCompleter(
chunkEvents: chunkEvents.stream,
codec: _loadAsync(key as NetworkImage, decode, chunkEvents),
scale: key.scale,
debugLabel: key.url,
informationCollector: _imageStreamInformationCollector(key));
邏輯基本一樣，具體特異的流程體現(xiàn)在 loadAsync里面：
// AssetImage _loadAsync
try {
data = await key.bundle.load(key.name);
} on FlutterError {
PaintingBinding.instance!.imageCache!.evict(key);
rethrow;
}
if (data == null) {
// 加載數(shù)據(jù)是null，清掉這個(gè)key的緩存
PaintingBinding.instance!.imageCache!.evict(key);
throw StateError('Unable to read data');
}
return await decode(data.buffer.asUint8List());
/// NetworkImage _loadAsync
Future<ui.Codec> _loadAsync(
NetworkImage key,
image_provider.DecoderCallback decode,
StreamController<ImageChunkEvent> chunkEvents) {
final Uri resolved = Uri.base.resolve(key.url);
return ui.webOnlyInstantiateImageCodecFromUrl(resolved, // ignore: undefined_function
chunkCallback: (int bytes, int total) {
chunkEvents.add(ImageChunkEvent(
cumulativeBytesLoaded: bytes, expectedTotalBytes: total));
}) as Future<ui.Codec>;
}
這里分別會(huì)從 bundle 里加載圖片和從網(wǎng)絡(luò)拉取圖片。
滑動(dòng)中處理
還記得上面提到的 ScrollAwareImageProvider嗎，這里會(huì)有一個(gè)關(guān)于滑動(dòng)中的判斷：
if (Scrollable.recommendDeferredLoadingForContext(context.context)) {
SchedulerBinding.instance.scheduleFrameCallback((_) {
scheduleMicrotask(() => resolveStreamForKey(configuration, stream, key, handleError));
});
return;
}
當(dāng) if 里的邏輯成立，就把解析圖片的工作放到下一幀。recommendDeferredLoadingForContext 的具體邏輯：
static bool recommendDeferredLoadingForContext(BuildContext context) {
final _ScrollableScope widget =
context.getElementForInheritedWidgetOfExactType<_ScrollableScope>()?.widget as _ScrollableScope;
if (widget == null) {
return false;
}
// 存在滑動(dòng)的widget
return widget.position.recommendDeferredLoading(context);
}
這個(gè)會(huì)找到 Widget 樹里面最近的 _ScrollableScope。如果 ScrollableScope 處于快速滑動(dòng)的時(shí)候，就返回true。所以 flutter 在快速滑動(dòng)的列表中是不會(huì)加載圖片的。
總結(jié)
到這里 Flutter 圖片的加載和緩存管理就介紹完了。我們可以認(rèn)識(shí)到幾個(gè)問題
- Flutter 本身是有圖片的內(nèi)存緩存。也是按照 LRU 的算法去管理緩存的。并且緩存池有閾值，我們可以自己去設(shè)置我們想要的內(nèi)存閾值。
- Flutter 本身沒有提供圖片的磁盤緩存，APP 重啟之后圖片加載流程是會(huì)重新走的。
到此這篇關(guān)于Flutter圖片加載與緩存機(jī)制的文章就介紹到這了,更多相關(guān)Flutter圖片加載與緩存機(jī)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android實(shí)現(xiàn)3D推拉門式滑動(dòng)菜單源碼解析
這篇文章主要為大家詳細(xì)解析了Android實(shí)現(xiàn)3D推拉門式滑動(dòng)菜單源碼以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。2017-11-11
詳解Android中Activity的四大啟動(dòng)模式實(shí)驗(yàn)簡(jiǎn)述
本篇文章主要介紹了Android中Activity的四大啟動(dòng)模式實(shí)驗(yàn)簡(jiǎn)述，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
Android SwipeRefreshLayout下拉刷新組件示例
SwipeRefrshLayout是Google官方更新的一個(gè)Widget,可以實(shí)現(xiàn)下拉刷新的效果。本文主要介紹了Android之SwipeRefreshLayout下拉刷新組件示例，有興趣的可以了解一下。2017-02-02
這篇文章主要為大家詳細(xì)介紹了Android自定義ListView單擊事件失效的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
Android App使用SQLite數(shù)據(jù)庫(kù)的一些要點(diǎn)總結(jié)
這篇文章主要介紹了Android App使用SQLite數(shù)據(jù)庫(kù)的一些要點(diǎn)總結(jié),使用Sqlite作為應(yīng)用的嵌入式數(shù)據(jù)庫(kù)非常輕便,需要的朋友可以參考下2016-03-03
php使用phpmailer發(fā)送郵件實(shí)例解析
這篇文章主要為大家詳細(xì)解析了php使用phpmailer發(fā)送郵件實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細(xì)介紹了Android畫板開發(fā)之橡皮擦功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)伴奏錄音合成MP3，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
Android學(xué)習(xí)教程之日歷控件使用（7）
這篇文章主要為大家詳細(xì)介紹了Android學(xué)習(xí)教程之日歷控件操作代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android手機(jī)屏幕px與dp互轉(zhuǎn)的工具類
今天小編就為大家分享一篇關(guān)于Android手機(jī)屏幕px與dp互轉(zhuǎn)的工具類，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03