文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么理解Flutter图片加载与缓存机制

2023-06-25 13:55

关注

本篇内容主要讲解“怎么理解Flutter图片加载与缓存机制”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解Flutter图片加载与缓存机制”吧!

前言

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

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

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

图片控件

// ImageWidget 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.dartvoid _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) { setState(() {    _imageInfo = imageInfo;  }}

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

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

图片解析

_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# resolveImageStream 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 方法调用 _createErrorHandlerAndKey 来处理图片加载的异常情况。当图片正常加载的时候,会执行 resolveStreamForKey。

//resolveStreamForKeyvoid 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 会把图片缓存相关的逻辑维护在 ImageCache这个对象。

缓存管理

ImageCache里面有 3 个 map:

分别表示

新增缓存

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

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

// 整理过核心逻辑的代码ImageStreamCompleter? putIfAbsent(Object key, ImageStreamCompleter loader(), { ImageErrorListener? onError }) {  // 根据key从正在加载的map里获取缓存,如果有直接返回  ImageStreamCompleter? result = _pendingImages[key]?.completer;  if (result != null) {      return result;    }    // 检查内存缓存,存在的话更新存活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;  //定义一个listenervoid listener(ImageInfo? info, bool syncCall) {// 加载的监听}    // 包装一个listenerfinal ImageStreamListener streamListener = ImageStreamListener(listener);if (maximumSize > 0 && maximumSizeBytes > 0) {// 放入缓存_pendingImages[key] = _PendingImage(result, streamListener);} else {untrackedPendingImage = _PendingImage(result, streamListener);}// 添加监听result.addListener(streamListener);return result;}

listener 回调的逻辑:

在 Image 状态改变的时候,会触发对 liveImages 的修改:

// Image_imageStream.removeListener(_getListener());// ImageStreamvoid 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 里面移除。

由此可见,缓存的优先级为 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);  }}

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

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

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

图片加载

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

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

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

// AssetImage _loadAsynctry {      data = await key.bundle.load(key.name);    } on FlutterError {      PaintingBinding.instance!.imageCache!.evict(key);      rethrow;    }if (data == null) {// 加载数据是null,清掉这个key的缓存PaintingBinding.instance!.imageCache!.evict(key);throw StateError('Unable to read data');}return await decode(data.buffer.asUint8List());/// NetworkImage _loadAsyncFuture<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 里加载图片和从网络拉取图片。

滑动中处理

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

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

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

static bool recommendDeferredLoadingForContext(BuildContext context) {final _ScrollableScope widget =context.getElementForInheritedWidgetOfExactType<_ScrollableScope>()?.widget as _ScrollableScope;if (widget == null) {      return false;    }// 存在滑动的widgetreturn widget.position.recommendDeferredLoading(context);}

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

到此,相信大家对“怎么理解Flutter图片加载与缓存机制”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯