flutter 加载图片的方式以及异步加载图片

一 . Flutter 中展示图片的方式一般根据来源分为3种

1. 加载本地图片资源 例如

   Image( image: AssetImage('images/home_n.png'), width: , height: , )

2. 加载本地File文件 Image.file( File(’/storage/xxx/xxx/test.jpg’))；

3. 加载网络图片 Image.network('http://xxx/xxx/test.gif')

二. 图片加载的原理简介

加载过程是由ImageProvider触发的。而ImageProvider表示异步获取图片数据的操作，可以从资源，网络，文件等渠道获取。

首先，ImageProvider根据_ImageState中传递的图片配置生成对应的图片缓存key，然后去ImageCache中查找是否由对应的图片缓存，如果有，通知刷新对应的UI；如果没有通过ImageStream异步加载，加载完成后更新缓存，然后在_ImageState刷新UI。

三. 网络加载 图片示例

FadeInImage(
          placeholder: AssetImage('images/icon_phone.png'),
          image: NetworkImage("${widget.url}" ?? ''),
          imageErrorBuilder: (context, error, stackTrace) {
            return Image.asset('images/icon_phone.png',
                width: 100, height: 100);
          },
          fit: BoxFit.fitWidth,
          width: 0.8.sw,
        )

四. 一些图片其他属性说明

4.1 fit属性

BoxFit.fill:充满父容器。

BoxFit.contain:尽可能大，保持图片分辨率。

BoxFit.cover:充满容器，可能会被截断。

BoxFit.none:图片居中显示，不改变分大小，可能会被截断。

BoxFit.fitWidth:图片填满宽度，高度可能会被截断

BoxFit.fitHeight:图片填满高度，宽度可能会被截断

BoxFit.scaleDown:图片可以完整显示，但是可能不能填充满