Flutter的 Image Widget

源码:image.dart

图片的显示

class Image extends StatefulWidget

Image 继承自 [StatefulWidget],它是具有状态的,通过

@override///image.dart 574L 
_ImageState createState() => _ImageState();

可以找到 Image对应的State类是 _ImageState , 那么构建Widget的方法就在_ImageStatebuild方法中,如下:

  @override
  Widget build(BuildContext context) {
    final RawImage image = RawImage(
      image: _imageInfo?.image,
      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,
      filterQuality: widget.filterQuality,
    );
    if (widget.excludeFromSemantics)
      return image;
    return Semantics(
      container: widget.semanticLabel != null,
      image: true,
      label: widget.semanticLabel == null ? '' : widget.semanticLabel,
      child: image,
    );
  }

由源码可以看到,在此方法中创建的是 RawImage widget ,传入 imageInfo.image,并由 RawImage来渲染图片数据。

图片的加载

Image 类有这么几个构造方法,方便开发者加载显示本地,文件,网络中的图片数据。

///  * [new Image], for obtaining an image from an [ImageProvider].
///  * [new Image.asset], for obtaining an image from an [AssetBundle]
///    using a key.
///  * [new Image.network], for obtaining an image from a URL.
///  * [new Image.file], for obtaining an image from a [File].
///  * [new Image.memory], for obtaining an image from a [Uint8List].

Image 加载了图片数据后存储在 imageInfo.imageImageInfo类很简单,只有两个属性:


@immutable
class ImageInfo {
  //图片像素点阵,
  final ui.Image image;
  //缩放比例,例当scale为2时,宽高都将变为原图的2倍。
  final double scale;
}

imageInfo又是在哪生成的呢,也就是在哪加载了图片的数据呢?根据 ImageInfo类的注释, ImageInfo 一旦被获得,就会被 ImageStream 用来表示为真实的图片数据。

ImageStream的部分源码如下:

class ImageStream extends Diagnosticable {
  /// Create an initially unbound image stream.
  ///
  /// Once an [ImageStreamCompleter] is available, call [setCompleter].
  ImageStream();

  /// The completer that has been assigned to this image stream.
  ///
  /// Generally there is no need to deal with the completer directly.
  ImageStreamCompleter get completer => _completer;
  ImageStreamCompleter _completer;

可见 ImageStream 主要是由 ImageStreamCompleter 来提供支持,只是一个 ImageStreamCompleter的包装类,不过当ImageStreamCompleter可用的时候,需调用ImageStream.setCompleter方法,以将事件传递给ImageStream中的监听者。

那么 ImageStreamCompleter又是个啥?继续往下看,源码:

/// Base class for those that manage the loading of [dart:ui.Image] objects for
/// [ImageStream]s.
///
/// [ImageStreamListener] objects are rarely constructed directly. Generally, an
/// [ImageProvider] subclass will return an [ImageStream] and automatically
/// configure it with the right [ImageStreamCompleter] when possible.
abstract class ImageStreamCompleter extends Diagnosticable {
  final List<_ImageListenerPair> _listeners = <_ImageListenerPair>[];
  ImageInfo _currentImage;

  void addListener(ImageListener listener, { ImageErrorListener onError }) {
      //省略
  }

  void removeListener(ImageListener listener) {
      //省略
  }

  /// Calls all the registered listeners to notify them of a new image.
  @protected
  void setImage(ImageInfo image) {
    _currentImage = image;
    if (_listeners.isEmpty)
      return;
    final List<ImageListener> localListeners = _listeners.map<ImageListener>(
      (_ImageListenerPair listenerPair) => listenerPair.listener
    ).toList();
    for (ImageListener listener in localListeners) {
      try {
        listener(image, false);
      } catch (exception, stack) {
        reportError(
          context: 'by an image listener',
          exception: exception,
          stack: stack,
        );
      }
    }
  }
}

ImageStreamCompleter是一个抽象类。去掉添加/移除Listener的方法后,还剩一个 [setImage] 方法,方法内部逻辑很简单,将传入的参数 ImageInfo 传递到各个 ImageListener,然后刷新GUI。

ImageStreamCompleter有两个实现类,分别为

  • OneFrameImageStreamCompleter

  • MultiFrameImageStreamCompleter

那刚才看下来的源码只是一个监听的设计而已:

widget监听 ImageStream , 而widget设置给ImageStreamlistener 被传递到 ImageStreamCompleter。当图片成功加载时,ImageStreamCompletersetImage方法被调用,图片通过回调回传到 widget

图片的加载2

Image类构造方法需传入一个 ImageProvider,图片应便是在这里面被加载的:

abstract class ImageProvider<T> {

  ///根据 configuration 处理 ImagePrivoder,并返回一个 ImageStream对象
  ///子类应该实现 [obtainKey] 和 [load] 方法,并且这两个方法在此流程中使用
  ImageStream resolve(ImageConfiguration configuration) {
    assert(configuration != null);
    final ImageStream stream = ImageStream();
    T obtainedKey;
    obtainKey(configuration).then<void>((T key) {
      obtainedKey = key;
      ///当拿到KEY时,查询缓存
      stream.setCompleter(PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key)));
    }).catchError(
        //省略错误处理...
        return null;
      }
    );
    return stream;
  }

  /// 根据 ImageConfiguration和 ImageProvider 的属性来生成一个KEY用来标识加载的图片
  /// KEY要求实现 '==' 和 hascode 方法,这个KEY主要是用于缓存
  @protected
  Future<T> obtainKey(ImageConfiguration configuration);

  ///开始加载图片
  @protected
  ImageStreamCompleter load(T key);
}

其中 resolve方法根据ImageConfiguration来获取相应的ImageStream

到目前为止,图片获取的流程应该差不多可以这样来表示...

image.png

图片的缓存

ImageProvider的源码中能过看到,图片的加载是做过缓存处理的。即在ImageProviderresolve方法中,有这么一句:

stream.setCompleter(PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key)));

1. KEY

image.putIfAbsent传入的 key 的类型即为ImageProvider<T>中的T,需是不可改变的(immutable)以及实现[==] 和 [hashcode]方法。并且由 ImageProvider.obtainKey方法生成,例如NetworkImage中是这么实现的:

class NetworkImage extends ImageProvider<NetworkImage> {
  @override
  Future<NetworkImage> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture<NetworkImage>(this);
  }
  @override
  bool operator ==(dynamic other) {
    if (other.runtimeType != runtimeType)
      return false;
    final NetworkImage typedOther = other;
    return url == typedOther.url
        && scale == typedOther.scale;
  }

  @override
  int get hashCode => hashValues(url, scale);
}

2.ImageCache

缓存的逻辑主要在 putIfAbent方法中

使用的 LRU,并且默认最多存储 1000个缓存,最大缓存限制为100MiB

const int _kDefaultSize = 1000;
const int _kDefaultSizeBytes = 100 << 20; // 100 MiB

目前的图片大小是这么计算的:

final int imageSize = info?.image == null ? 0 : info.image.height * info.image.width * 4;

3.缓存

由上代码可以看出,flutter 自带的缓存只会在运行期间生效,也就是缓存在内存中。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容