Flutter-Image组件

配图来自网络，如侵必删

在应用开发当中，Image加载图片是我们最常见的组件之一。这篇博客就来分享一个Image组件相关的知识，希望对看文章的小伙伴有所帮助。

Image

Image组件用来在屏幕中绘制图片，其中加载的图片资源可以来自本地，也可以来自网络，Image组件内部提供了多个构造函数来加载各种来源的图片。

加载网络图片

最常见的场景就是加载网络图片，代码示例：

Image.network(
     "https://xxx.com/a.jpg",
     height: 300,
     width: 200,
)

显示代码大概就是这样，network构造函数就是为我们加载网络图片的。

加载图片文件

Image.file()

加载本地图片资源

Image.asset()

Image常用属性

对齐方式，可选参数有Alignment.center、Alignment.topLeft、Alignment.topLeft、Alignment.topCenter、Alignment.topRight、Alignment.centerLeft、Alignment.centerRight、Alignment.bottomLeft、Alignment.bottomCenter、Alignment.bottomRight：

alignment: Alignment.center

拉伸方式：

fit: BoxFit.fill

可选参数说明：

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
• BoxFit.contain:全图显示，显示原比例，可能会有空隙。
• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
• BoxFit.fitHeight：高度充满（竖向充满）,显示可能拉伸，可能裁切。
• BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。

重复方式：

repeat: ImageRepeat.repeat

可选参数说明：

• ImageRepeat.repeat: 横向和纵向都进行重复，直到铺满整个画布。
• ImageRepeat.repeatX: 横向重复，纵向不重复。
• ImageRepeat.repeatY：纵向重复，横向不重复。