Flutter中网络图片加载和缓存

前言

应用开发中经常会碰到网络图片的加载，通常我们会对图片进行缓存，以便下次加载同一张图片时不用再重新下载，在包含有大量图片的应用中，会大幅提高图片展现速度、提升用户体验且为用户节省流量。Flutter本身提供的Image Widget已经实现了加载网络图片的功能，且具备内存缓存的机制，接下来一起看一下Image的网络图片加载的实现。

重温小部件Image

常用小部件Image中实现了几种构造函数，已经足够我们日常开发中各种场景下创建Image对象使用了。

• 有参构造函数：

  Image(Key key, @required this.image, …)

  开发者可根据自定义的ImageProvider来创建Image。

• 命名构造函数：

  • Image.network(String src, …)

    src即是根据网络获取的图片url地址。

  • Image.file(File file, …)

    file指本地一个图片文件对象，安卓中需要android.permission.READ_EXTERNAL_STORAGE权限。

  • Image.asset(String name, …)

    name指项目中添加的图片资源名，事先在pubspec.yaml文件中有声明。

  • Image.memory(Uint8List bytes, …)

    bytes指内存中的图片数据，将其转化为图片对象。

其中Image.network就是我们本篇分享的重点 – 加载网络图片。

Image.network源码分析

下面通过源码我们来看下Image.network加载网络图片的具体实现。

  Image.network(String src, {
    Key key,
    double scale = 1.0,
    .
    .
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

  /// The image to display.
  final ImageProvider image;

首先，使用Image.network命名构造函数创建Image对象时，会同时初始化实例变量image，image是一个ImageProvider对象，该ImageProvider就是我们所需要的图片的提供者，它本身是一个抽象类，子类包括NetworkImage、FileImage、ExactAssetImage、AssetImage、MemoryImage等，网络加载图片使用的就是NetworkImage。

Image作为一个StatefulWidget其状态由_ImageState控制，_ImageState继承自State类，其生命周期方法包括initState()、didChangeDependencies()、build()、deactivate()、dispose()、didUpdateWidget()等。我们重点来_ImageState中函数的执行。

由于插入渲染树时会先调用initState()函数，然后调用didChangeDependencies()函数，_ImageState中并没有重写initState()函数，所以didChangeDependencies()函数会执行，看下didChangeDependencies()里的内容

@override
  void didChangeDependencies() {
    _invertColors = MediaQuery.of(context, nullOk: true)?.invertColors
      ?? SemanticsBinding.instance.accessibilityFeatures.invertColors;
    _resolveImage();

    if (TickerMode.of(context))
      _listenToStream();
    else
      _stopListeningToStream();

    super.didChangeDependencies();
  }

_resolveImage()会被调用，函数内容如下

  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);
  }

函数中先创建了一个ImageStream对象，该对象是一个图片资源的句柄，其持有着图片资源加载完毕后的监听回调和图片资