Flutter 图片加载

奇技指南

本篇文章你将获得？

1、Flutter 图片加载方式

2、Flutter 图片加载源码实现流程

3、Flutter 图片加载优化点有什么

本文转载自奇舞移动技术。

1、Image.asset

使用 key 从AssetBundle获得的图片；

两种方式如下：

Image(height: 100, width: 100, image: AssetImage(happy.png), )

Image.asset( happy.png, width: 100, height: 100,)

当然这一方式，需要在 pubspec.yaml 文件中配置图片路径。

2、Image.network

从网络URL中获取图片；

Image.network('https://p0.ssl.qhimg.com/t0183421f63f84fccaf.gif',fit: BoxFit.fill);

3、Image.file

从本地文件中获取图片；

Image.file(File('/sdcard/happy.png')),

4、Image.memory

用于从 Uint8List 获取图片；

new Image.memory(Uint8List bytes),

其他相关常用的加载图片的方式

5、CacheNetworkImage

缓存的网络图片，此类属于 cached_network_image 库；

newCachedNetworkImage(
   fit:BoxFit.fill,
   width:200,
   height:100,
   imageUrl:'https://p0.ssl.qhimg.com/t0183421f63f84fccaf.gif',
   placeholder:(context,url)=>newProgressView(),
   errorWidget:(context,url,error)=>newIcon(Icons.error),
);

6、FadeInImage.memoryNetwork

默认占位图和淡入效果

import'package:transparent_image/transparent_image.dart';

FadeInImage.memoryNetwork(
   placeholder:kTransparentImage,//kTransparentImage 属于 transparent_image 库
   image:'https://p0.ssl.qhimg.com/t0183421f63f84fccaf.gif',
);

7、Icon Icons 图片参考URL

new Icon(Icons.android,size: 200,);

Flutter 可以为当前设备加载适合其分辨率的图像。指定不同设备像素比例的图片可以这样分配asset文件夹：

• …icon/happy.png

• …/2.0x/happy.png

• …/3.0x/happy.png

Flutter 打包应用时，资源会按照 key-value 的形式存入apk 的                            assets/flutter_assets/AssetManifest.json 文件中，加载资源时先解析 json 文件，选择最适合的图片进行加载显示，其中 AssetManifest.json 的具体内容简介如：

{
   "assets/happy.png":[
       "assets/2.0x/happy.png",
       "assets/3.0x/happy.png"
  ]
}

android 上可以通过 AssetManager 获取 asset， 根据 key 查找到 openFd 。

key 是由 PluginRegistry.Registrar 的 lookupKeyForAsset 与 FlutterView 的 getLookupKeyForAsset 得到；

PluginRegistry.Registrar 用于开发插件，而 FlutterView 则用于开发平台 app的view。

pubspec.yaml

flutter:
assets:
  - icons/happy.png

Java plugin code

AssetManagerassetManager=registrar.context().getAssets();
Stringkey=registrar.lookupKeyForAsset("icons/happy.png");
AssetFileDescriptorfd=assetManager.openFd(key);

Objective-C plugin

NSString*key=[registrarlookupKeyForAsset:@"icons/happy.png"];
NSString*path=[[NSBundlemainBundle]pathForResource:keyofType:nil];

Image.network 的方法如下：

Image.network(
   Stringsrc, {
   Keykey,
   doublescale=1.0,
   this.frameBuilder,
   this.loadingBuilder,
   this.semanticLabel,
   this.excludeFromSemantics=false,
   this.width,
   this.height,
   this.color,
   this.colorBlendMode,
   this.fit,
   this.alignment=Alignment.center,
   this.repeat=ImageRepeat.noRepeat,
   this.centerSlice,
   this.matchTextDirection=false,
   this.gaplessPlayback=false,
   this.filterQuality=FilterQuality.low,
   Map<String,String>headers,
}) :image=NetworkImage(src,scale:scale,headers:headers),
     assert(alignment!=null),
     assert(repeat!=null),
     assert(matchTextDirection!=null),
     super(key:key);

class_ImageStateextendsState<Image>withWidgetsBindingObserver{
 ImageStream_imageStream;
 ImageInfo_imageInfo;

.......

@override
voidinitState() {
   super.initState();
   WidgetsBinding.instance.addObserver(this);
}

@override
voiddidChangeDependencies() {
   _updateInvertColors();
   _resolveImage();//解析图片从这里开始
   //设置和移除监听图片变化的回调
   if(TickerMode.of(context))
     _listenToStream();
   else
     _stopListeningToStream();
   super.didChangeDependencies();
}

void_resolveImage() {
   //根据 ImageConfiguration 调用 ImageProvider 的 resolve 函数获得 ImageStream 对象
   finalImageStreamnewStream=widget.image.resolve(createLocalImageConfiguration(
       context,
       size:widget.width!=null&&widget.height!=null?Size(widget.width,widget.height) :null,
    ));
   _updateSourceStream(newStream);
}
......
}

它的生命周期方法方法包括 initState()， didChangeDependencies()， build() 、 deactivate() 、 dispose() 、 didUpdateWidget() 等等。当它插入到渲染树时，先调用 initState() 函数，再调用 didChangeDependencies() 。代码中可以看到调用了方法 _resolveImage() ，这个方法中创建了 ImageStream 的新对象 newStream 。widget.image 就是 ImageProvider ，调用resolve方法，代码如下：

ImageStreamresolve(ImageConfigurationconfiguration) {
 finalImageStreamstream=ImageStream();
 TobtainedKey;
 booldidError=false;
 Future<void>handleError(dynamicexception,StackTracestack)async{
   if(didError) {
     return;
  }
   didError=true;
   awaitnull;// 等待事件轮询，以防侦听器被添加到图像流中。

   final_ErrorImageCompleterimageCompleter=_ErrorImageCompleter();
   stream.setCompleter(imageCompleter);
  ......
}

......

     Future<T>key;
     try{
       key=obtainKey(configuration);
    }catch(error,stackTrace) {
       return;
    }
     key.then<void>((Tkey) {
       obtainedKey=key;
       finalImageStreamCompletercompleter=
       PaintingBinding.instance.imageCache.putIfAbsent(key, ()=>load(key),onError:handleError);
       if(completer!=null) {
         stream.setCompleter(completer);
      }
    }).catchError(handleError);

returnstream;

ImageStreamCompleter 用于管理 dart:ui 加载的类的基类。ImageStreams 的对象很少直接构造，而是由 ImageStreamCompleter 自动配置它。ImageStream 中的图片管理者 ImageStreamCompleter 通过方法创建，imageCache 是 Flutter 框架中实现的用于图片缓存的单例，它在 Dart 虚拟机加载时就已经创建。imageCache 最多可缓存 1000 张图像和 100MB 内存空间。可以使用 [maximumSize] 和 [maximumSizeBytes]调整最大大小。

PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key), onError:handleError);

根据源码可以看到两个关键方法 ：putIfAbsent 和 load。

putIfAbsent

ImageStreamCompleterputIfAbsent(Objectkey,ImageStreamCompleterloader(), {ImageErrorListeneronError}) {
   ImageStreamCompleterresult=_pendingImages[key]?.completer;
   // 因为图像还没有加载，不需要做任何事情。
   if(result!=null)
     returnresult;
   // 从缓存列表中根据Key删除对应的 imageprovider，便于将它移动到下面最近使用位置。
   final_CachedImageimage=_cache.remove(key);
   if(image!=null) {
     _cache[key]=image;
     returnimage.completer;
  }
   try{
     result=loader();
  }catch(error,stackTrace) {
    ......
  }
   voidlistener(ImageInfoinfo,boolsyncCall) {
     // 无法加载的图像不会占用缓存大小。
     finalintimageSize=info?.image==null?0:info.image.height*info.image.width*4;
     final_CachedImageimage=_CachedImage(result,imageSize);
     // 如果图像大于最大缓存大小，且缓存大小不为零，则将缓存大小增加到图像大小加上 1000。
     // 思考点：一直这么加什么时候引起崩溃？
     if(maximumSizeBytes>0&&imageSize>maximumSizeBytes) {
       _maximumSizeBytes=imageSize+1000;
    }
     _currentSizeBytes+=imageSize;
     final_PendingImagependingImage=_pendingImages.remove(key);
     if(pendingImage!=null) {
       pendingImage.removeListener();
    }
     _cache[key]=image;
     _checkCacheSize();
  }
   if(maximumSize>0&&maximumSizeBytes>0) {
     finalImageStreamListenerstreamListener=ImageStreamListener(listener);
     _pendingImages[key]=_PendingImage(result,streamListener);
     // 移除 [_PendingImage.removeListener] 上的监听
     result.addListener(streamListener);
  }
   returnresult;
}

Future<ui.Codec>_loadAsync(
   NetworkImagekey,
   StreamController<ImageChunkEvent>chunkEvents,
)async{
   try{
     finalUriresolved=Uri.base.resolve(key.url);
     finalHttpClientRequestrequest=await_httpClient.getUrl(resolved);
     headers?.forEach((Stringname,Stringvalue) {
       request.headers.add(name,value);
    });
     finalHttpClientResponseresponse=awaitrequest.close();
     if(response.statusCode!=HttpStatus.ok)
       throwimage_provider.NetworkImageLoadException(statusCode:response.statusCode,uri:resolved);
       //将网络返回的 response 信息，转换成内存中的 Uint8List bytes。这里面有解压 gzip 的逻辑。
     finalUint8Listbytes=awaitconsolidateHttpClientResponseBytes(
       response,
       onBytesReceived: (intcumulative,inttotal) {
         chunkEvents.add(ImageChunkEvent(
           cumulativeBytesLoaded:cumulative,
           expectedTotalBytes:total,
        ));
      },
    );
     if(bytes.lengthInBytes==0)
       throwException('NetworkImage is an empty file:$resolved');

     returnPaintingBinding.instance.instantiateImageCodec(bytes);
  }finally{
     chunkEvents.close();
  }
}

将网络返回的response信息，转换成内存中的 Uint8List bytes，最终返回一个实例化图像编解码器对象Codec，此处 Codec 可以移步到 painting.dart 文件的 _instantiateImageCodec 看出来它是调用了native方法去处理了。

• app 帧 ：Flutter 引擎绘制到屏幕的帧，显示到应用程序 GUI。

这就不贴所有代码了，在 image_stream.dart 文件中 可见 class

MultiFrameImageStreamCompleter。    

MultiFrameImageStreamCompleter({
   @requiredFuture<ui.Codec>codec,
   @requireddoublescale,
   Stream<ImageChunkEvent>chunkEvents,
   InformationCollectorinformationCollector,
}) :assert(codec!=null),
     _informationCollector=informationCollector,
     _scale=scale{
   codec.then<void>(_handleCodecReady,onError: (dynamicerror,StackTracestack) {
    ..........
  });

这里 codec 异步回调次方法

void_handleCodecReady(ui.Codeccodec) {
   _codec=codec;
   if(hasListeners) {
     _decodeNextFrameAndSchedule();
  }
}

codec 解码获取到图片的帧数，判断图片是只有一帧的话，就是png、jpg这样静态图片。

Future<void>_decodeNextFrameAndSchedule()async{
   try{
     _nextFrame=await_codec.getNextFrame();
  }catch(exception,stack) {
    ........
     return;
  }
   if(_codec.frameCount==1) {// 此处判断图片是只有一帧的逻辑.
     _emitFrame(ImageInfo(image:_nextFrame.image,scale:_scale));
     return;
  }
   _scheduleAppFrame();
}

 void_scheduleAppFrame() {
   if(_frameCallbackScheduled) {
     return;
  }
   _frameCallbackScheduled=true;
   SchedulerBinding.instance.scheduleFrameCallback(_handleAppFrame);
}

_emitFrame(ImageInfo(image:_nextFrame.image,scale:_scale));

void_emitFrame(ImageInfoimageInfo) {
   setImage(imageInfo);
   _framesEmitted+=1;
}


 @protected
 voidsetImage(ImageInfoimage) {
   _currentImage=image;
   if(_listeners.isEmpty)
     return;
   // 复制一份以允许并发修改。
finalList<ImageStreamListener>localListeners=List<ImageStreamListener>.from(_listeners);

   for(ImageStreamListenerlistenerinlocalListeners) {
     try{
       listener.onImage(image,false);
    }catch(exception,stack) {
      ..........
    }
  }
}

setImage 核心逻辑就是通知所有注册上的监听，表示图片发生了变化可以更新啦。此时我们回到 开始提到的_ImageState 类中 didChangeDependencies 方法调用的 _listenToStream 方法，最终调用方法 _handleImageFrame ，改变 图片信息 _imageInfo 和 图片帧数变化 _frameNumber ，最终执行 setState(() {}) 来刷新了 UI。

void_listenToStream() {
   if(_isListeningToStream)
     return;
   _imageStream.addListener(_getListener());
   _isListeningToStream=true;
}

ImageStreamListener_getListener([ImageLoadingBuilderloadingBuilder]) {
   loadingBuilder??=widget.loadingBuilder;
   returnImageStreamListener(
     _handleImageFrame,
     onChunk:loadingBuilder==null?null:_handleImageChunk,
  );
}

 void_handleImageFrame(ImageInfoimageInfo,boolsynchronousCall) {
   setState(() {
     _imageInfo=imageInfo;
     _loadingProgress=null;
     _frameNumber=_frameNumber==null?0:_frameNumber+1;
     _wasSynchronouslyLoaded|=synchronousCall;
  });
}