Flutter圖片加載與緩存機制的深入探究

更新時間：2021年11月09日 11:37:48 作者：West2ers

應(yīng)用開發(fā)中經(jīng)常會碰到網(wǎng)絡(luò)圖片的加載,通常我們會對圖片進行緩存,以便下次加載同一張圖片時不用再重新下載,下面這篇文章主要給大家介紹了關(guān)于Flutter圖片加載與緩存機制的相關(guān)資料,需要的朋友可以參考下

前言

今天來學(xué)習(xí)一下 Flutter 自身是如何加載圖片和管理圖片的。

Flutter 提供了一個圖片控件 Image，Image 定義了若干中加載圖片的方式，包括 Image.asset、Image.file、Image.network、Image.memory。

Image內(nèi)部維護了一個 ImageProvider對象，ImageProvider則真正維護整個圖片加載的工作。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 則會在圖片的每一幀進行重新賦值：

// image.dart
void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
 	setState(() {
    _imageInfo = imageInfo;
  }
}

那么圖片信息是從哪里來的呢，它是由 _resolveImage 這個方法發(fā)起的。這個方法會在 _ImageState 的 didChangeDependencies、 didUpdateWidget和 reassemble方法進行調(diào)用。

也就是控件發(fā)生變化刷新狀態(tài)的時候，就會重新去解析圖片。

圖片解析

_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);
}

這里會用 ScrollAwareImageProvider 包裝一下，ScrollAwareImageProvider 的功能我們后面會介紹，這里先跳過。

//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 來處理圖片加載的異常情況。當(dāng)圖片正常加載的時候，會執(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 會把圖片緩存相關(guān)的邏輯維護在 ImageCache這個對象。

緩存管理

ImageCache里面有 3 個 map:

分別表示

正在加載的圖片
緩存在內(nèi)存的圖片
表示正活躍的圖片，Widget 狀態(tài)變化后可能會清空

新增緩存

新增緩存的時候會設(shè)置 map 的 key， key 由 ImageProvider 對象提供。例如：

AssetImage 當(dāng)包名和bundle一樣的時候，key可以認(rèn)為是一樣的。
NetworkImage 當(dāng)圖片 url 和比例一樣的時候，key可以認(rèn)為是一樣的。

ImageCache 實際上是一個單例對象。也就是 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 個 map 都沒有獲取到緩存的圖片
  result = loader(); // 加載
  _trackLiveImage(key, _LiveImage(result, null, () => _liveImages.remove(key)));
  
	_PendingImage? untrackedPendingImage;

  //定義一個listener
	void listener(ImageInfo? info, bool syncCall) {
		// 加載的監(jiān)聽
	}
  
  // 包裝一個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)改變的時候，會觸發(fā)對 liveImages 的修改：

// Image
_imageStream.removeListener(_getListener());

// ImageStream
void removeListener(ImageStreamListener listener) {
  for (final VoidCallback callback in _onLastListenerRemovedCallbacks) {
    callback();
  }
  _onLastListenerRemovedCallbacks.clear();
}

而在 _trackLiveImage 的時候，_LiveImage 都注冊了上面的這個 callback:

_trackLiveImage(key, _LiveImage(image.completer, image.sizeBytes, () => _liveImages.remove(key)));

這時候改圖片會從 _liveImages 里面移除。

由此可見，緩存的優(yōu)先級為 pending -> cache -> live -> load，圖片緩存和獲取的流程如下圖所示：

緩存清理

在更新緩存大小的時候，還會進行緩存大小的檢查：

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ù)量的時候，就會進行緩存的清理。

所以上面使用緩存的過程中，多次訪問的緩存就會把key往后放，避免一上來就被清理掉。

所以 Flutter 自身的緩存清理算法也是遵循了 “最近最少使用” 的。

圖片緩存的邏輯如下圖所示：

圖片加載

圖片加載主要依賴上面的 load方法進行。不同的 ImageProvider 子類有自己的實現(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，清掉這個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>;
}

這里分別會從 bundle 里加載圖片和從網(wǎng)絡(luò)拉取圖片。

滑動中處理

還記得上面提到的 ScrollAwareImageProvider嗎，這里會有一個關(guān)于滑動中的判斷：

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;
    }
	// 存在滑動的widget
	return widget.position.recommendDeferredLoading(context);
}

這個會找到 Widget 樹里面最近的 _ScrollableScope。如果 ScrollableScope 處于快速滑動的時候，就返回true。所以 flutter 在快速滑動的列表中是不會加載圖片的。

總結(jié)

到這里 Flutter 圖片的加載和緩存管理就介紹完了。我們可以認(rèn)識到幾個問題

Flutter 本身是有圖片的內(nèi)存緩存。也是按照 LRU 的算法去管理緩存的。并且緩存池有閾值，我們可以自己去設(shè)置我們想要的內(nèi)存閾值。
Flutter 本身沒有提供圖片的磁盤緩存，APP 重啟之后圖片加載流程是會重新走的。

到此這篇關(guān)于Flutter圖片加載與緩存機制的文章就介紹到這了,更多相關(guān)Flutter圖片加載與緩存機制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Flutter圖片加載與緩存機制的深入探究

目錄

前言

圖片控件

圖片解析

緩存管理

新增緩存

緩存清理

圖片加載

滑動中處理

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Flutter圖片加載與緩存機制的深入探究

目錄

前言

圖片控件

圖片解析

緩存管理

​新增緩存

緩存清理

圖片加載

滑動中處理

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

新增緩存