Flutter中的Image控件和Android中的ImageView效果一样，用来展示图片，不过Flutter中的Image更像Glide，能够从网络、文件、内存中加载图片。
Image构造方法有：
| 方法 | 说明 |
|---|---|
| Image() | 从ImageProvider获取图片 |
| Image.asset() | 从AssetBundle获取图片，具体实现类为AssetImage |
| Image.file() | 从File中获取图片，具体实现类为FileImage |
| Image.network() | 从网络获取图片，具体实现类为NetworkImage |
| Image.memory() | 从Uint8List中显示图片，具体实现类为MemoryImage |
Image 构造函数如下：
const Image({
Key key,
@required this.image,
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,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(filterQuality != null),
assert(matchTextDirection != null),
super(key: key);
常用属性如下：
| 属性 | 说明 |
|---|---|
| width | Image控件宽度（不是图片宽度） |
| height | Image 控件高度 |
| color | 配合colorBlendMode一起使用，和图片的每个像素混合 |
| colorBlendMode | 混合模式 |
| fit | 填充方式 ，类似Android的scaleType 。fill：显示整张图片，拉伸填充全部可显示区。contain显示整张图片，按照原始比例缩放显示,居中显示。cover：按照原始比例缩放，可能裁剪，填满可显示区域，居中显示。 fitWidth：按照原始比例缩放，可能裁剪，宽度优先填满。fitHeight：按照原始比例缩放，可能裁剪，高度优先填满。none：图片居中显示，不缩放原图，可能被裁剪。scaleDown：显示整张图片，只能缩小或者原图显示 |
| repeat | 重合方式，repeat在x和y方向上重复图像，直到填充框。repeatX在x方向上重复图像，直到水平填充框。repeatY在y方向重复图像，直到垂直填充框。noRepeat将盒子的未覆盖部分保持透明 |
| centerSlice | 传入一个Rect，生成一个和Android中的.9一样效果的图片 |
| frameBuilder | 一个构建器函数，负责创建此图像 |
| loadingBuilder | 一个构建器函数，指定图像仍在加载时向用户显示内容组件 |
| errorBuilder | 一个构建器函数，指定图像加载失败时向用户显示内容组件。如果没有提供该函数则图片加载过程中任何异常情况都会被[FlutterError.onError]捕获（即程序报错），如果提供了该函数则用该函数返回的widget替换图片控件（或者重新抛出异常） |
示例：
Container(
decoration: BoxDecoration(
color: Colors.amber,
),
child: Image(
image: NetworkImage(
'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3172609127,317609957&fm=26&gp=0.jpg'),
/* loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
}, */
frameBuilder: (BuildContext context, Widget child, int frame,
bool wasSynchronouslyLoaded) {
print(frame);
print(child);
if (wasSynchronouslyLoaded) return child;
return AnimatedOpacity(
child: child,
opacity: frame == null ? 0 : 1,
duration: const Duration(seconds: 1),
curve: Curves.easeOut,
);
},
errorBuilder: (BuildContext context, Object exception,
StackTrace stackTrace) {
return Center(
child: Text("加载出错~"),
);
},
height: 100,
width: 200,
),
)
这里frameBuilder中wasSynchronouslyLoaded 表示是否加载完毕，child表示Image控件，如果配置了loadingBuilder，则frameBuilder的返回结果会作为loadingBuilder的children传入.
frame 表示帧 。示例中如果图片加载完毕返回child，如果没有加载完毕返回AnimatedOpacity组件因为第一次frame 为null 所以AnimatedOpacity初始opacity是0，然后变成1所以会看到一个淡出的效果。
网友评论