源码：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。
到目前为止，图片获取的流程应该差不多可以这样来表示...
image.png
图片的缓存
在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 自带的缓存只会在运行期间生效，也就是缓存在内存中。
网友评论