经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Flutter » 查看文章
Flutter图片加载与缓存机制的深入探究
来源：jb51　　时间：2021/11/9 15:10:17　　对本文有异议

前言

今天来学习一下 Flutter 自身是如何加载图片和管理图片的。

Flutter 提供了一个图片控件 Image，Image 定义了若干中加载图片的方式，包括 Image.asset、Image.file、Image.network、Image.memory。

Image内部维护了一个 ImageProvider对象，ImageProvider则真正维护整个图片加载的工作。Widget 本身内部是体现在 RawImage中：​

图片控件

  1. // Image
  2. Widget result = RawImage(
  3.       image: _imageInfo?.image,
  4.       debugImageLabel: _imageInfo?.debugLabel,
  5.       width: widget.width,
  6.       height: widget.height,
  7.       scale: _imageInfo?.scale ?? 1.0,
  8.       color: widget.color,
  9.       colorBlendMode: widget.colorBlendMode,
  10.       fit: widget.fit,
  11.       alignment: widget.alignment,
  12.       repeat: widget.repeat,
  13.       centerSlice: widget.centerSlice,
  14.       matchTextDirection: widget.matchTextDirection,
  15.       invertColors: _invertColors,
  16.       isAntiAlias: widget.isAntiAlias,
  17.       filterQuality: widget.filterQuality,
  18.     );
  19. return result;

这里可以看到 _imageInfo 决定 RawImage如何展示图片。

_imageInfo 则会在图片的每一帧进行重新赋值：

  1. // image.dart
  2. void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
  3.  	setState(() {
  4.     _imageInfo = imageInfo;
  5.   }
  6. }

那么图片信息是从哪里来的呢，它是由 _resolveImage 这个方法发起的。这个方法会在 _ImageState 的 didChangeDependencies、 didUpdateWidget和 reassemble方法进行调用。

也就是控件发生变化刷新状态的时候，就会重新去解析图片。

图片解析

_resolveImage 逻辑如下：

  1. void _resolveImage() {
  2. 	final ScrollAwareImageProvider provider = ScrollAwareImageProvider<dynamic>(
  3.       context: _scrollAwareContext,
  4.       imageProvider: widget.image,
  5.     );
  6. 	final ImageStream newStream =
  7.       provider.resolve(createLocalImageConfiguration(
  8.         context,
  9.         size: widget.width != null && widget.height != null ? Size(widget.width, widget.height) : null,
  10.       ));
  11. 	_updateSourceStream(newStream);
  12. }

这里会用 ScrollAwareImageProvider 包装一下，ScrollAwareImageProvider 的功能我们后面会介绍，这里先跳过。

  1. //ImageProvider# resolve
  2. ImageStream resolve(ImageConfiguration configuration) {
  3. 	_createErrorHandlerAndKey(configuration,(T key, ImageErrorListener errorHandler) {
  4.         resolveStreamForKey(configuration, stream, key, errorHandler);
  5.       },
  6. 		(T? key, dynamic exception, StackTrace? stack) async {
  7.         await null; // wait an event turn in case a listener has been added to the image stream.
  8.         final _ErrorImageCompleter imageCompleter = _ErrorImageCompleter();
  9.         stream.setCompleter(imageCompleter);
  10.         InformationCollector? collector;
  11.         assert(() {
  12.           collector = () sync* {
  13.             yield DiagnosticsProperty<ImageProvider>('Image provider', this);
  14.             yield DiagnosticsProperty<ImageConfiguration>('Image configuration', configuration);
  15.             yield DiagnosticsProperty<T>('Image key', key, defaultValue: null);
  16.           };
  17.           return true;
  18.         }());
  19.         imageCompleter.setError(
  20.           exception: exception,
  21.           stack: stack,
  22.           context: ErrorDescription('while resolving an image'),
  23.           silent: true, // could be a network error or whatnot
  24.           informationCollector: collector,
  25.         );
  26.       }
  27. 	);
  28. }

resolve 方法调用 _createErrorHandlerAndKey 来处理图片加载的异常情况。当图片正常加载的时候，会执行 resolveStreamForKey。

  1. //resolveStreamForKey
  2. void resolveStreamForKey(ImageConfiguration configuration, ImageStream stream, T key, ImageErrorListener handleError) {
  3. 	if (stream.completer != null) {
  4. 		final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
  5.         key,
  6.         () => stream.completer!,
  7.         onError: handleError,
  8.       );
  9. 		return;
  10. 	}
  11.  
  12. 	final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
  13. 		key,
  14.       () => load(key, PaintingBinding.instance!.instantiateImageCodec),
  15.       onError: handleError,
  16. 		);
  17.  
  18. 	if (completer != null) {
  19.       stream.setCompleter(completer);
  20.     }
  21. }

Flutter 会把图片缓存相关的逻辑维护在 ImageCache这个对象。

缓存管理

ImageCache里面有 3 个 map:

分别表示

  • 正在加载的图片
  • 缓存在内存的图片
  • 表示正活跃的图片，Widget 状态变化后可能会清空

​新增缓存

新增缓存的时候会设置 map 的 key， key 由 ImageProvider 对象提供。例如：

  • AssetImage  当包名和bundle一样的时候，key可以认为是一样的。
  • NetworkImage 当图片 url 和比例一样的时候，key可以认为是一样的。

ImageCache 实际上是一个单例对象。也就是 Flutter 的图片缓存管理是全局的。ImageCache 最重要的方法就是 putIfAbsent：

  1. // 整理过核心逻辑的代码
  2. ImageStreamCompleter? putIfAbsent(Object key, ImageStreamCompleter loader(), { ImageErrorListener? onError }) {
  3.   // 根据key从正在加载的map里获取缓存，如果有直接返回
  4.   	ImageStreamCompleter? result = _pendingImages[key]?.completer;
  5.   	if (result != null) {
  6.       return result;
  7.     }
  8.   
  9.   // 检查内存缓存，存在的话更新存活map
  10.   final _CachedImage? image = _cache.remove(key);
  11.   if (image != null) {
  12.     _trackLiveImage(key, _LiveImage(image.completer, image.sizeBytes, () => _liveImages.remove(key)));
  13.     _cache[key] = image;
  14.     return image.completer;
  15.   }
  16.   
  17.   // 没有缓存，从 _live 里面取
  18.   final _CachedImage? liveImage = _liveImages[key];
  19.   if (liveImage != null) {
  20.     // 更新缓存
  21.     _touch(key, liveImage, timelineTask);
  22.     return liveImage.completer;
  23.   }
  24.   
  25.   // 3 个 map 都没有获取到缓存的图片
  26.   result = loader(); // 加载
  27.   _trackLiveImage(key, _LiveImage(result, null, () => _liveImages.remove(key)));
  28.   
  29. 	_PendingImage? untrackedPendingImage;
  30.  
  31.   //定义一个listener
  32. 	void listener(ImageInfo? info, bool syncCall) {
  33. 		// 加载的监听
  34. 	}
  35.   
  36.   // 包装一个listener
  37. 	final ImageStreamListener streamListener = ImageStreamListener(listener);
  38. 	if (maximumSize > 0 && maximumSizeBytes > 0) {
  39. 		// 放入缓存
  40. 		_pendingImages[key] = _PendingImage(result, streamListener);
  41. 	} else {
  42. 		untrackedPendingImage = _PendingImage(result, streamListener);
  43. 	}
  44. 	// 添加监听
  45. 	result.addListener(streamListener);
  46. 	return result;
  47. }

listener 回调的逻辑：

在 Image 状态改变的时候，会触发对 liveImages 的修改：

  1. // Image
  2. _imageStream.removeListener(_getListener());
  3.  
  4. // ImageStream
  5. void removeListener(ImageStreamListener listener) {
  6.   for (final VoidCallback callback in _onLastListenerRemovedCallbacks) {
  7.     callback();
  8.   }
  9.   _onLastListenerRemovedCallbacks.clear();
  10. }

而在 _trackLiveImage 的时候，_LiveImage 都注册了上面的这个 callback:

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

这时候改图片会从 _liveImages 里面移除。

由此可见，缓存的优先级为 pending -> cache -> live -> load，图片缓存和获取的流程如下图所示：

缓存清理

在更新缓存大小的时候，还会进行缓存大小的检查：

  1. void _checkCacheSize(TimelineTask? timelineTask) {
  2.   while (_currentSizeBytes > _maximumSizeBytes || _cache.length > _maximumSize) {
  3.     final Object key = _cache.keys.first;
  4.     final _CachedImage image = _cache[key]!;
  5.     _currentSizeBytes -= image.sizeBytes!;
  6.     _cache.remove(key);
  7.   }
  8. }

当当前缓存总容量大于最大容量或者缓存数量大于最大数量的时候，就会进行缓存的清理。

所以上面使用缓存的过程中，多次访问的缓存就会把key往后放，避免一上来就被清理掉。

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

图片缓存的逻辑如下图所示：

图片加载

图片加载主要依赖上面的 load方法进行。不同的 ImageProvider 子类有自己的实现。例如

AssetImage

  1. return MultiFrameImageStreamCompleter(
  2.       codec: _loadAsync(key, decode),
  3.       scale: key.scale,
  4.       debugLabel: key.name,
  5.       informationCollector: collector
  6.     );

NetworkImage

  1. final StreamController<ImageChunkEvent> chunkEvents =
  2.         StreamController<ImageChunkEvent>();
  3.  
  4.     return MultiFrameImageStreamCompleter(
  5.         chunkEvents: chunkEvents.stream,
  6.         codec: _loadAsync(key as NetworkImage, decode, chunkEvents),
  7.         scale: key.scale,
  8.         debugLabel: key.url,
  9.         informationCollector: _imageStreamInformationCollector(key));

逻辑基本一样，具体特异的流程体现在 loadAsync里面：

  1. // AssetImage _loadAsync
  2. try {
  3.       data = await key.bundle.load(key.name);
  4.     } on FlutterError {
  5.       PaintingBinding.instance!.imageCache!.evict(key);
  6.       rethrow;
  7.     }
  8.  
  9. if (data == null) {
  10. // 加载数据是null，清掉这个key的缓存
  11. 	PaintingBinding.instance!.imageCache!.evict(key);
  12. 	throw StateError('Unable to read data');
  13. }
  14.  
  15. return await decode(data.buffer.asUint8List());
  16.  
  17.  
  18. /// NetworkImage _loadAsync
  19. Future<ui.Codec> _loadAsync(
  20.       NetworkImage key,
  21.       image_provider.DecoderCallback decode,
  22.       StreamController<ImageChunkEvent> chunkEvents) {
  23.  
  24. 	final Uri resolved = Uri.base.resolve(key.url);
  25. 	return ui.webOnlyInstantiateImageCodecFromUrl(resolved, // ignore: undefined_function
  26.         chunkCallback: (int bytes, int total) {
  27.       chunkEvents.add(ImageChunkEvent(
  28.           cumulativeBytesLoaded: bytes, expectedTotalBytes: total));
  29.     }) as Future<ui.Codec>;
  30. }

这里分别会从 bundle 里加载图片和从网络拉取图片。

滑动中处理

还记得上面提到的 ScrollAwareImageProvider吗，这里会有一个关于滑动中的判断：

  1. if (Scrollable.recommendDeferredLoadingForContext(context.context)) {
  2.   SchedulerBinding.instance.scheduleFrameCallback((_) {
  3. 		scheduleMicrotask(() => resolveStreamForKey(configuration, stream, key, handleError));
  4. 	 });
  5. 	return;
  6. }

当 if 里的逻辑成立，就把解析图片的工作放到下一帧。recommendDeferredLoadingForContext 的具体逻辑：

  1. static bool recommendDeferredLoadingForContext(BuildContext context) {
  2. 	
  3. 	final _ScrollableScope widget =
  4. 		context.getElementForInheritedWidgetOfExactType<_ScrollableScope>()?.widget as _ScrollableScope;
  5. 	if (widget == null) {
  6.       return false;
  7.     }
  8. 	// 存在滑动的widget
  9. 	return widget.position.recommendDeferredLoading(context);
  10. }

这个会找到 Widget 树里面最近的 _ScrollableScope。如果 ScrollableScope 处于快速滑动的时候，就返回true。所以 flutter 在快速滑动的列表中是不会加载图片的。

总结

到这里 Flutter 图片的加载和缓存管理就介绍完了。我们可以认识到几个问题

  • Flutter 本身是有图片的内存缓存。也是按照 LRU 的算法去管理缓存的。并且缓存池有阈值，我们可以自己去设置我们想要的内存阈值。
  • Flutter 本身没有提供图片的磁盘缓存，APP 重启之后图片加载流程是会重新走的。

到此这篇关于Flutter图片加载与缓存机制的文章就介绍到这了,更多相关Flutter图片加载与缓存机制内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Flutter热门文章

  • flutter监听app进入前后台状态的实现
  • Flutter开发之支持放大镜的输入框功能实现
  • Android&nbsp;Flutter实现图片滑动切换效果
  • 详解Flutter中视频播放器插件的使用教程
  • flutter&nbsp;微信聊天输入框功能实现
  • 详解如何在Flutter中获取设备标识符
  • Android使用Flutter实现录音插件
  • Flutter 编写收音机开源
  • Android?Flutter实现精灵图的使用详解
  • Flutter配置代理抓包实现过程详解

    • Flutter推荐文章

  • 【Flutter】一文读懂混入类Mixin
  • 深入理解 Flutter 图片加载原理
  • Flutter系列文章-Flutter进阶2
  • Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法
  • flutter&nbsp;微信聊天输入框功能实现
  • 与 Flutter 共创未来 | Flutter Forward 活动精彩回顾
  • Flutter框架渲染流程与使用
  • Flutter异常监控 - 叁 | 从bugsnag源码学习如何追溯异常产生路径
  • Compose声明式代码语法对比React?Flutter?SwiftUI
  • Android使用Flutter实现录音插件

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号