共计 1749 个字符，预计需要花费 5 分钟才能阅读完成。
Image 是一个罕用的控件，它能够帮忙咱们显示图片，图片的资源能够是来自网络、本地或者是内存。在挪动端的开发中会大量应用 Image 来展现一些图文，理解和把握 Image 控件是十分有必要的。
AssetImage 和 Image.asset
AssetImage是 Flutter 提供的一个能够从本地读取图片资源的类，咱们能够应用它来读取图片。同样 Flutter 还提供了 Image.asset 这个构造方法间接来帮忙咱们读取图片资源并返回一个 Image 对象。其实 Image.asset 是对 AssetImage 一层更高级的封装。
留神：要读取本地图片咱们首先须要在
pubspec.yaml文件里配置本地图片资源的门路，咱们这里在assets这个字段下新增了- images/image_demo.jpg这个文件。后续将会有一篇专门的博客来解说资源的治理。
1. AssetImage
Image(image: AssetImage("images/image_demo.jpg"),
width: 80,
height: 80,
)2. Image.asset
Image.asset(
"images/image_demo.jpg",
width: 80,
height: 80,
)两个办法都是传入一个本地文件门路就能够了。
NetworkImage 和 Image.network
NetworkImage是一个能够从网络下载图片的类，它自身是异步的。Image.network是对 NetworkImage 的封装，它须要传入一个 URL 地址就能够返回一个 Image 对象。这两个的设计跟 AssetImage 和Image.asset的设计基本一致。
3. NetworkImage
Image(image: NetworkImage("http://www.fulade.me/img/avatar.jpg"),
width: 80,
height: 80,
)4. Image.network
Image.network(
"http://www.fulade.me/img/avatar.jpg",
width: 80,
height: 80,
)Alignment
alignment是 Image 的一个很重要的参数，它能够帮忙咱们设置图片的地位。有以下几个枚举值
| 参数 | 形容 |
|---|---|
| topCenter | 居中靠上 |
| topRight | 右上角 |
| centerLeft | 居中靠左 |
| center | 居中 |
| centerRight | 居中靠右 |
| bottomLeft | 居右下角 |
| bottomCenter | 居中靠下 |
| bottomRight | 居右下角 |
BoxFit
fit参数是很重要的布局参数，当咱们的图片内容跟 Image 设置的大小不齐全吻合的时候，fit的参数值 BoxFit 能够帮忙咱们做最优的调整和显示
5. BoxFit.containfit 的默认值是 BoxFit.contain。由下图咱们不难看出，BoxFit.contain 会等比例缩放，放弃图片的原始的比例并且显示在 Image 内。
6. BoxFit.fill
由图可见 BoxFit.fill 会充斥整个容器，如果图片大小与容器不齐全吻合，可能会呈现拉伸。
7. BoxFit.coverBoxFit.cover会放弃图片资源的大小，如果超过的局部会被裁掉不会显示。
8. BoxFit.fitWidthBoxFit.fitWidth会使宽度充斥整个容器，高度会按比例缩放，图片不会被拉伸，超出容器的局部会被剪裁。
9. BoxFit.fitHeightBoxFit.fitHeight跟 BoxFit.fitWidth 类似，高度会充斥整个容器，宽度会按比例缩放，图片不会被拉伸，超出容器的局部会被剪裁。
10. BoxFit.none
none 示意没有设置显示策略，以原始大小居中来显示。
11. BoxFit.scaleDown
当图片资源大于容器的时候，成果相当于 BoxFit.none，
当组件比图片小时，成果相当于 BoxFit.contain。
对于加载过的图片 Flutter 是会帮忙咱们做内存缓存，最大缓存数量是 1000，最大缓存内存空间是 100M。
想体验以上的示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->image_page.dart 查看，并且能够下载下来运行并体验。