Flutter的 Image Widget

原始碼：image.dart

圖片的顯示

class Image extends StatefulWidget

Image 繼承自 [StatefulWidget]，它是具有狀態的，通過

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

可以找到 Image對應的State類是 _ImageState ， 那麼構建Widget的方法就在_ImageState 的build方法中，如下:

  @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.image。ImageInfo類很簡單，只有兩個屬性：

@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設定給ImageStream的 listener 被傳遞到 ImageStreamCompleter。當圖片成功載入時，ImageStreamCompleter的setImage方法被呼叫，圖片通過回撥回傳到 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。

到目前為止，圖片獲取的流程應該差不多可以這樣來表示...

圖片的快取

在ImageProvider的原始碼中能過看到，圖片的載入是做過快取處理的。即在ImageProvider的resolve方法中，有這麼一句：

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 自帶的快取只會在執行期間生效，也就是快取在記憶體中。