// 網(wǎng)絡(luò)圖片
Image.network(imgUrl,  //圖片鏈接
      width: w, 
      height: h),
)

// ImageState->didChangeDependencies
@override
void didChangeDependencies() {
    // ios在輔助模式下的配置，不影響主流程，我們不分析
  _updateInvertColors(); 
  
  // 核心方法，開始請求解析圖片，從這里開始，provier，stream,completer開始悉數(shù)登場
  _resolveImage();
    
    // 這個判斷可以認(rèn)為是，當(dāng)前widget 在tree中是否還是激活狀態(tài)
  if (TickerMode.of(context))
    _listenToStream();
  else
    _stopListeningToStream();

  super.didChangeDependencies();
}

void _resolveImage() {
    // ScrollAwareImageProvider代理模式，它本身也是繼承的ImageProvider,
    // 它的功能是防止在快速滾動時加載圖片
  final ScrollAwareImageProvider provider = ScrollAwareImageProvider<dynamic>(
    context: _scrollAwareContext,
    imageProvider: widget.image,
  );
  
  // 這里調(diào)用了ImageProvider的resolve方法，圖片請求的主流程
  final ImageStream newStream =
    provider.resolve(createLocalImageConfiguration(
      context,
      size: widget.width != null && widget.height != null ? Size(widget.width, widget.height) : null,
    ));
  assert(newStream != null);
  // 對resolve返回的Stream注冊監(jiān)聽，這個監(jiān)聽很重要，決定了后續(xù)的圖片展示(包括gif)
  // 刷新當(dāng)前圖片展示一次，例如幀數(shù)，加載狀態(tài)等等
  _updateSourceStream(newStream);
}

// 這方法初次看比較繞，其實就干了三個事
// 1. 創(chuàng)建了一個ImageStream
// 2. 創(chuàng)建一個Key,key由具體的provider自己實現(xiàn)，這個key用在后面ImageCache里
// 3. 把接下來的流程封裝在一個Zone里，捕獲了同步異常和異步異常，不了解Zone的同學(xué)可以參考我另一篇文章
@nonVirtual
ImageStream resolve(ImageConfiguration configuration) {
  assert(configuration != null);
  final ImageStream stream = createStream(configuration);
  // 創(chuàng)建了key，把后續(xù)的流程封裝在zone里，源碼我不貼了，感興趣的同學(xué)自己看下
  _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,
      );
    },
  );
  return stream;
}

// ImageProvier -> resolveStreamForKey
@protected
void resolveStreamForKey(ImageConfiguration configuration, ImageStream stream, T key, ImageErrorListener handleError) {
    // streem中已經(jīng)有completer了，從緩存中拿，
  if (stream.completer != null) {
    final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
      key,
      () => stream.completer!,
      onError: handleError,
    );
    assert(identical(completer, stream.completer));
    return;
  }
  
  // 如果是首次，新建一個completer,然后會執(zhí)行l(wèi)oad這個函數(shù)，就是putIfAbsent的第二個入?yún)?
  final ImageStreamCompleter? completer = PaintingBinding.instance!.imageCache!.putIfAbsent(
    key,
    () => load(key, PaintingBinding.instance!.instantiateImageCodec),
    onError: handleError,
  );
  // 賦值，注意這里，后面講圖片展示的時候會說到這里
  if (completer != null) {
    stream.setCompleter(completer);
  }
}

// NetworkImage
@override
ImageStreamCompleter load(image_provider.NetworkImage key, image_provider.DecoderCallback decode) {
  // Ownership of this controller is handed off to [_loadAsync]; it is that
  // method's responsibility to close the controller's stream when the image
  // has been loaded or an error is thrown.
  final StreamController<ImageChunkEvent> chunkEvents = StreamController<ImageChunkEvent>();
    
    // MultiFrameImageStreamCompleter是多幀解析器，默認(rèn)使用的是就是這個，所以默認(rèn)支持gif
  return MultiFrameImageStreamCompleter(
    codec: _loadAsync(key as NetworkImage, chunkEvents, decode), // 異步加載圖片，我們接著看這個方法
    chunkEvents: chunkEvents.stream, //加載過程的回調(diào)
    scale: key.scale,
    debugLabel: key.url,
    informationCollector: () {
      return <DiagnosticsNode>[
        DiagnosticsProperty<image_provider.ImageProvider>('Image provider', this),
        DiagnosticsProperty<image_provider.NetworkImage>('Image key', key),
      ];
    },
  );
}

// 這里就很清晰了吧，內(nèi)置的HttpClient去加載
Future<ui.Codec> _loadAsync(
  NetworkImage key,
  StreamController<ImageChunkEvent> chunkEvents,
  image_provider.DecoderCallback decode,
) async {
  try {
    assert(key == this);
    final Uri resolved = Uri.base.resolve(key.url);
    final HttpClientRequest request = await _httpClient.getUrl(resolved);

    headers?.forEach((String name, String value) {
      request.headers.add(name, value);
    });
    final HttpClientResponse response = await request.close();
    if (response.statusCode != HttpStatus.ok) {
        // 請求失敗，報錯
      throw image_provider.NetworkImageLoadException(statusCode: response.statusCode, uri: resolved);
    }
    
    // 二進(jìn)制流數(shù)據(jù)回調(diào)
    final Uint8List bytes = await consolidateHttpClientResponseBytes(
      response,
      onBytesReceived: (int cumulative, int? total) {
        chunkEvents.add(ImageChunkEvent(
          cumulativeBytesLoaded: cumulative,
          expectedTotalBytes: total,
        ));
      },
    );
    if (bytes.lengthInBytes == 0)
      throw Exception('NetworkImage is an empty file: $resolved');
    //解析二進(jìn)制流
    return decode(bytes);
  } catch (e) {
    // Depending on where the exception was thrown, the image cache may not
    // have had a chance to track the key in the cache at all.
    // Schedule a microtask to give the cache a chance to add the key.
    scheduleMicrotask(() {
      PaintingBinding.instance!.imageCache!.evict(key);
    });
    rethrow;
  } finally {
    chunkEvents.close();
  }
}

// 很容易發(fā)現(xiàn)RawImage，RawImage是實際渲染圖片的widget,這么說其實也不對，RenderImage才是最終渲染的
// 可以看到RawImage的第一個參數(shù)_imageInfo?.image，那_imageInfo?.image是什么時候賦值的？
Widget 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,
);

// 設(shè)置了監(jiān)聽
_imageStream.addListener(_getListener());

// ImageStreamListener
ImageStreamListener _getListener({bool recreateListener = false}) {
  if(_imageStreamListener == null || recreateListener) {
    _lastException = null;
    _lastStack = null;
    _imageStreamListener = ImageStreamListener(
      _handleImageFrame, // 每一幀圖片解析完，代表可以展示這一幀了
      onChunk: widget.loadingBuilder == null ? null : _handleImageChunk, // 圖片加載互調(diào)
      onError: widget.errorBuilder != null // 圖片加載錯誤互調(diào)
          ? (dynamic error, StackTrace stackTrace) {
              setState(() {
                _lastException = error;
                _lastStack = stackTrace;
              });
            }
          : null,
    );
  }
  return _imageStreamListener;
}

// 很簡單，就是setState,可以看到這里賦值了_imageInfo
void _handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
  setState(() {
    _imageInfo = imageInfo;
    _loadingProgress = null;
    _frameNumber = _frameNumber == null ? 0 : _frameNumber + 1;
    _wasSynchronouslyLoaded |= synchronousCall;
  });
}

// MultiFrameImageStreamCompleter就是支持gif的多幀解析器，還有一個OneFrameImageStreamCompleter，但已經(jīng)不用了
MultiFrameImageStreamCompleter({
  required Future<ui.Codec> codec,
  required double scale,
  String? debugLabel,
  Stream<ImageChunkEvent>? chunkEvents,
  InformationCollector? informationCollector,
}) : assert(codec != null),
     _informationCollector = informationCollector,
     _scale = scale {
  this.debugLabel = debugLabel;
  // _handleCodecReady就是圖片加載完的回調(diào)，我們看看他內(nèi)部干了什么
  codec.then<void>(_handleCodecReady, onError: (dynamic error, StackTrace stack) {
    // 捕獲錯誤并上報
  });
  // 監(jiān)聽回調(diào)
  if (chunkEvents != null) {
    chunkEvents.listen(reportImageChunkEvent,
      onError: (dynamic error, StackTrace stack) {
        reportError(
          context: ErrorDescription('loading an image'),
          exception: error,
          stack: stack,
          informationCollector: informationCollector,
          silent: true,
        );
      },
    );
  }
}

void _handleCodecReady(ui.Codec codec) {
  _codec = codec;
  assert(_codec != null);

  if (hasListeners) {
      // 看函數(shù)名就知道了，解析下一幀并執(zhí)行
    _decodeNextFrameAndSchedule();
  }
}

Future<void> _decodeNextFrameAndSchedule() async {
  try {
      // 獲得下一幀，這一步在C中處理
    _nextFrame = await _codec!.getNextFrame();
  } catch (exception, stack) {
    reportError(
      context: ErrorDescription('resolving an image frame'),
      exception: exception,
      stack: stack,
      informationCollector: _informationCollector,
      silent: true,
    );
    return;
  }
  // 幀數(shù)不等于1，說明圖片有多幀
  if (_codec!.frameCount == 1) {
    // This is not an animated image, just return it and don't schedule more
    // frames.
    _emitFrame(ImageInfo(image: _nextFrame!.image, scale: _scale, debugLabel: debugLabel));
    return;
  }
  // 如果只有一幀，_scheduleAppFrame最終也會走到_emitFrame
  _scheduleAppFrame();
}

// 調(diào)用了setImage
void _emitFrame(ImageInfo imageInfo) {
  setImage(imageInfo);
  _framesEmitted += 1;
}

@protected
void setImage(ImageInfo image) {
  _currentImage = image;
  if (_listeners.isEmpty)
    return;
  // Make a copy to allow for concurrent modification.
  final List<ImageStreamListener> localListeners =
      List<ImageStreamListener>.from(_listeners);
  for (final ImageStreamListener listener in localListeners) {
    try {
        // 在這里回調(diào)了onImage,那這個回調(diào)是哪里注冊的呢？ 回到ImageStream的addLister里
      listener.onImage(image, false);
    } catch (exception, stack) {
    }
  }
}

void addListener(ImageStreamListener listener) {
    // 這里破案了，_completer 不為null的時候，注冊了回調(diào)，而ImageStream的completer在ImageStream被創(chuàng)建的還是就賦值了
    // 所以前面的listener.onImage(image, false);最終會回調(diào)到ImageState里的_imageStreamListener
  if (_completer != null)
    return _completer!.addListener(listener);
  _listeners ??= <ImageStreamListener>[];
  _listeners!.add(listener);
}