乐趣区

关于ios:Flutter-26Flutter手把手教程UI布局Image控件NetworkImageAssetImage

jiezi

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.contain
fit 的默认值是 BoxFit.contain。由下图咱们不难看出，BoxFit.contain 会等比例缩放，放弃图片的原始的比例并且显示在 Image 内。

6. BoxFit.fill
由图可见 BoxFit.fill 会充斥整个容器，如果图片大小与容器不齐全吻合，可能会呈现拉伸。

7. BoxFit.cover
BoxFit.cover会放弃图片资源的大小，如果超过的局部会被裁掉不会显示。

8. BoxFit.fitWidth
BoxFit.fitWidth会使宽度充斥整个容器，高度会按比例缩放，图片不会被拉伸，超出容器的局部会被剪裁。

9. BoxFit.fitHeight
BoxFit.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 查看，并且能够下载下来运行并体验。

退出移动版