flutter原始碼學習筆記-圖片載入流程
阿新 • • 發佈：2020-04-05
本文基於1.12.13+hotfix.8版本原始碼分析。
#### 0、大綱
1. Image
2. ImageProvider
3. 圖片資料載入 ImageStream、ImageStreamCompleter
4. 快取池 PaintingBinding#imageCache
5. 網路圖片載入
#### 1、Image
點選進入原始碼，可以看到Image繼承自StatefulWidget，那麼重點自然在State裡面。跟著生命週期走，可以發現在didUpdateWidget中呼叫了這個方法：
```
void _resolveImage() {
// 在這裡獲取到一個流物件
final ImageStream newStream =
widget.image.resolve(createLocalImageConfiguration(
context,
size: widget.width != null && widget.height != null ? Size(widget.width, widget.height) : null,
));
assert(newStream != null);
_updateSourceStream(newStream);
}
void _updateSourceStream(ImageStream newStream) {
// ... 省略部分原始碼
if (_isListeningToStream)
_imageStream.addListener(_getListener());
}
ImageStreamListener _getListener([ImageLoadingBuilder loadingBuilder]) {
loadingBuilder ??= widget.loadingBuilder;
return ImageStreamListener(
_handleImageFrame,
onChunk: loadingBuilder == null ? null : _handleImageChunk,
);
}
```
在這裡呼叫了image（ImageProvider）的resolve方法獲取到一個ImageStream，並給這個流設定了監聽器。從名字上，不難猜出這是個圖片資料流，在listener拿到資料後會呼叫setState(() {})方法進行rebuild，這裡不再貼程式碼。
#### 2、ImageProvider
在上面我們看到了Image是需要接收圖片資料進行繪製的，那麼，這個資料是在哪裡解碼的？又是哪裡傳送過來的？
帶著疑問，我們先進到ImageProvider的原始碼，可以發現其實這個類非常簡單，程式碼量也不多，可以看看resolve方法的核心部分：
```