Flutter完整开发实战详解(10、深刻图片加载流程)

时间 2019-11-05

标签 flutter 完整开发实战详解深刻图片加载流程繁體版

原文原文链接

做为系列文章的第十篇，本篇主要深刻了解 Flutter 中图片加载的流程，剥析图片流程中有意思的片断，结尾再实现 Flutter 实现本地图片缓存的支持。git

前文：github

1、Dart语言和Flutter基础

2、快速开发实战篇

3、打包与填坑篇

4、 Redux、主题、国际化

5、深刻探索

6、深刻Widget原理

7、深刻布局原理

8、实用技巧与填坑

9、深刻绘制原理

在 Flutter 中，图片的加载主要是经过 Image 控件实现的，而 Image 控件自己是一个 StatefulWidget ，经过前文咱们能够快速想到， Image 确定对应有它的 RenderObject 负责 layout 和 paint ，那么这个过程当中，图片是如何变成画面显示出来的？缓存

1、图片流程

Flutter 的图片加载流程其实“并不复杂”，具体可点击下方大图查看，以网络图片加载为例子，先简单总结，其中主要流程是：bash

一、首先 Image 经过 ImageProvider 获得 ImageStream 对象
二、而后 _ImageState 利用 ImageStream 添加监听，等待图片数据
三、接着 ImageProvider 经过 load 方法去加载并返回 ImageStreamCompleter 对象
四、而后 ImageStream 会关联 ImageStreamCompleter
五、以后 ImageStreamCompleter 会经过 http 下载图片，再通过 PaintingBinding 编码转化后，获得 ui.Codec 可绘制对象，并封装成 ImageInfo 返回
六、接着 ImageInfo 回调到 ImageStream 的监听，设置给 _ImageState build 的 RawImage 对象。
七、最后 RawImage 的 RenderImage 经过 paint 绘制 ImageInfo 中的 ui.Codec

注意，这的 ui.Codec 和后面的 ui.Image等，只是由于 Flutter 中在导入对象时，为了和其余类型区分而加入的重命名：import 'dart:ui' as ui show Codec;网络

是否是感受有点晕了？relax！后面咱们将逐步理解这个流程。异步

在 Flutter 的图片的加载流程中，主要有三个角色：async

Image ：用于显示图片的 Widget，最后经过内部的 RenderImage 绘制。
ImageProvider：提供加载图片的方式如 NetworkImage 、FileImage 、MemoryImage 、AssetImage 等，从而获取 ImageStream ，用于监听结果。
ImageStream：图片的加载对象，经过 ImageStreamCompleter 最后会返回一个 ImageInfo ，而 ImageInfo 内包含有 RenderImage 最后的绘制对象 ui.Image 。

从上面的大图流程可知，网络图片是经过 NetworkImage 这个 Provider 去提供加载的，各种 Provider 的实现其实大同小异，其中主要须要实现的方法主要以下图所示：ide

一、obtainKey

该方法主要用于标示当前 Provider 的存在，好比在 NetworkImage 中，这个方法返回的是 SynchronousFuture<NetworkImage>(this)，也就是 NetworkImage 本身自己，而且获得的这个 key 在 ImageProvider 中，是用于做为内存缓存的 key 值。布局

在 NetworkImage 中主要是经过 runtimeType 、url 、scale 这三个参数判断两个NetworkImage 是否相等，因此除了 url ，图片的 scale 一样会影响缓存的对象哦。post

二、load(T key)

load 方法顾名思义就是加载了，而该方法中所使用的 key ，毫无疑问就是上面 obtainKey 方法所提供的。

load 方法返回的是 ImageStreamCompleter 抽象对象，它主要是用于管理和通知 ImageStream 中获得的 dart:ui.Image ，好比在 NetworkImage 中的是子类 MultiFrameImageStreamCompleter , 它能够处理多帧的动画，若是图片只有一针，那么将执行一次都结束。

三、resolve

ImageProvider 的关键在于 resolve 方法，从流程图咱们可知，该方法在 Image 的生命周期回调方法 didChangeDependencies 、 didUpdateWidget 、 reassemble 里会被调用，从下方源码能够看出，上面咱们所实现的 obtainKey 和 load 都会在这里被调用

这个有个有意思的对象，就是 Zone ！

由于在 Flutter 中，同步异常能够经过try-catch捕获，而异步异常如 Future ，是没法被当前的 try-catch 直接捕获的。

因此在 Dart中 Zone 的概念，你能够给执行对象指定一个Zone，相似提供一个沙箱环境，而在这个沙箱内，你就能够所有能够捕获、拦截或修改一些代码行为，好比全部未被处理的异常。

resolve 方法内主要是用到了 PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key) ， PaintingBinding 是一个胶水类，主要是经过 Mixins 粘在 WidgetsFlutterBinding 上使用，而之前的篇章咱们说过， WidgetsFlutterBinding 就是咱们的启动方法 runApp 的执行者。

因此图片缓存是在PaintingBinding.instance.imageCache内单例维护的。

以下图所示，putIfAbsent 方法内部，主要是经过 key 判断内存中是否已有缓存、或者正在缓存的对象，若是是就返回该 ImageStreamCompleter ，否则就调用 loader 去加载并返回。

值得注意的是，此时的的 cache 是有两个状态的，由于返回的 ImageStreamCompleter 并不表明着图片就加载完成，因此若是是首次加载，会先有 _PendingImage 用于标示该key的图片处于加载中的状态 ，而且添加一个 listener，用于图片加载完成后，替换为缓存 _CacheImage 。

发现没有，这里和咱们理解上的 Cache 概念稍微有点不一样，之前咱们缓存的通常是 key - bitmap 对象，也就是实际绘制数据，而在 Flutter 中，缓存的仅是ImageStreamCompleter 对象，而不是实际绘制对象 dart:ui.Image 。

三、ImageStreamCompleter

ImageStreamCompleter 是一个抽象对象，它主要是用于管理和通知 ImageStream ，处理图片数据后获得的包含有 dart:ui.Image 的对象 ImageInfo 。

接下来咱们看 NetworkImage 中的 ImageStreamCompleter 实现类 MultiFrameImageStreamCompleter 。以下图代码所示，MultiFrameImageStreamCompleter 主要经过 codec 参数得到渲染数据，而这个数据来源经过 _loadAsync 方法获得，该方法主要经过 http 下载图片后，对图片数据经过 PaintingBinding 进行 ImageCodec 编码处理，将图片转化为引擎可绘制数据。

而在 MultiFrameImageStreamCompleter 内部， ui.Codec 会被 ui.Image ，经过 ImageInfo 封装起来，并逐步往回回调到 _ImageState 中，而后经过 setState 将数据传递到 RenderImage 内部去绘制。

怎么样，如今再回过头去看开头的流程图，有没有一切明了的感受？

2、本地图片缓存

经过上方流程的了解，咱们知道 Flutter 实现了图片的内存缓存，可是并无实现图片的本地缓存，因此咱们入手的点，应该从 ImageProvider 开始。

经过上面对 NetworkImage 的分析，咱们知道图片是在 _loadAsync 方法经过 http 下载的，因此最简单的就是，咱们从 NetworkImage cv 一份代码，修改 _loadAsync 支持 http 下载前读取本地缓存，下载后经过将数据保存在本地。

结合 flutter_cache_manager 插件，以下方代码所示，就能够快速简单实现图片的本地缓存：

Future<ui.Codec> _loadAsync(NetworkImage key) async {
    assert(key == this);

    /// add this start
    /// flutter_cache_manager DefaultCacheManager
    final fileInfo = await DefaultCacheManager().getFileFromCache(key.url);
    if(fileInfo != null && fileInfo.file != null) {
      final Uint8List cacheBytes = await fileInfo.file.readAsBytes();
      if (cacheBytes != null) {
        return PaintingBinding.instance.instantiateImageCodec(cacheBytes);
      }
    }
    /// add this end

    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 Exception('HTTP request failed, statusCode: ${response?.statusCode}, $resolved');

    final Uint8List bytes = await consolidateHttpClientResponseBytes(response);
    if (bytes.lengthInBytes == 0)
      throw Exception('NetworkImage is an empty file: $resolved');
    
    /// add this start
    await DefaultCacheManager().putFile(key.url, bytes);
    /// add this edn

    return PaintingBinding.instance.instantiateImageCodec(bytes);
  }
复制代码

3、其余补充

一、缓存数量

在闲鱼关于 Flutter 线上应用的内存分析文章中，有过对图片加载对内存问题的详细分析，其中就有一个是 ImageCache 的问题。

上面的流程咱们知道， ImageCache 缓存的是一个异步对象，缓存异步加载对象的一个问题是，在图片加载解码完成以前，你没法知道到底将要消耗多少内存，而且大量的图片加载，会致使的解码任务须要产生大量的IO。

而在 Flutter 中， ImageCache 默认的缓存大小是

const int _kDefaultSize = 1000;
const int _kDefaultSizeBytes = 100 << 20; // 100 
复制代码

因此简单粗暴的作法是： PaintingBinding.instance.imageCache.maximumSize = 100; 同时在页面不可见时暂停图片的加载等。

二、.9图

在 Image中，能够经过 centerSlice 配置参数设置.9图效果哦。

自此，第十篇终于结束了！(///▽///)

资源推荐

Github ： github.com/CarGuo
本文代码：github.com/CarGuo/GSYG…

完整开源项目推荐：

文章

《Flutter完整开发实战详解(1、Dart语言和Flutter基础)》

《Flutter完整开发实战详解(2、快速开发实战篇)》

《Flutter完整开发实战详解(3、打包与填坑篇)》

《Flutter完整开发实战详解(4、Redux、主题、国际化)》

《Flutter完整开发实战详解(5、深刻探索)》

《Flutter完整开发实战详解(6、深刻Widget原理)》

《Flutter完整开发实战详解(7、深刻布局原理)》

《Flutter完整开发实战详解(8、实用技巧与填坑)》

《Flutter完整开发实战详解(9、深刻绘制原理)》

《Flutter完整开发实战详解(10、深刻图片加载流程)》

《Flutter完整开发实战详解(11、全面深刻理解Stream)》

《跨平台项目开源项目推荐》

《移动端跨平台开发的深度解析》

《React Native 的将来与React Hooks》

Flutter完整开发实战详解(10、 深刻图片加载流程)