flutter控件之Image & FadeInImage &

Image

Image可加载本地图片和网络图片，跟iOS中的UIImageView一样。

加载本地资源图片，如 Image.asset(‘images/logo.png’)；

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

FadeInImage

在加载网络图片的时候，为了提升用户的等待体验，我们往往会加入占位图、加载动画等元素，但是默认的 Image.network 构造方法并不支持这些高级功能，这时候 FadeInImage 控件就派上用场了。

FadeInImage 控件提供了图片占位的功能，并且支持在图片加载完成时淡入淡出的视觉效果。此外，由于 Image 支持 gif 格式，我们甚至还可以将一些炫酷的加载动画作为占位图。

FadeInImage.assetNetwork( 

placeholder: 'assets/loading.gif', //gif占位 

image: 'https://xxx/xxx/xxx.jpg', fit: BoxFit.cover, //图片拉伸模式 

width: 200, 

height: 200,

)

CachedNetworkImage

第三方加载网络图片与前两个最大区别就是，flutter系统自带image加载不带缓存，所以，一般项目中需要加载网络图片，都是使用CachedNetworkImage。

CachedNetworkImage使用方法与Image类似，除了支持图片缓存外，还提供了比FadeInImage更为强大的加载过程占位与加载错误占位，可以支持比用图片占位更灵活的自定义控件占位。

1、引入库

---

pubspec.yaml 中添加插件

在dev_dependencies中，添加cached_network_image第三方包，添加完，点击pub get下载一下这个依赖包

2、在你需要用到的页面，引入头文件

---

import 'package:cached_network_image/cached_network_image.dart';

3、使用代码

---

CachedNetworkImage( 

imageUrl: "http://xxx/xxx/jpg", 

placeholder: (context, url) => CircularProgressIndicator(), 

errorWidget: (context, url, error) => Icon(Icons.error), 

width：100,

height：200,

fit：BoxFit.fill,//图片展示模式，相当于iOS的contentMode属性

)