Flutter Image图片组件
图片组件是显示图像的组件，Image组件有很多构造函数。
Image.asset 本地图片
child: Image.asset(
"images/a.png",
fit: BoxFit.fill,
alignment: Alignment.center,
),
pubspec.yaml
在pubspec.yaml文件中添加assets如图上。
如果本地有一百张图片可以直接写：
assets:
- images/
运行效果：
Image.network 远程图片
child: Image.network(
"http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
alignment: Alignment.topLeft,
color: Color.fromARGB(133, 0, 0, 0),
colorBlendMode: BlendMode.colorDodge,
fit: BoxFit.fill,
repeat: ImageRepeat.repeat,
),
Image常用的几个属性
名称 | 类型 | 说明 | |
alignment | Alignment | 图片的对齐方式 | |
color和colorBlendMode | 设置图片的背景颜色，通常和colorBlendMode配合一起使用，这样可以是图片颜色和背景混合。上面的图片就是进行了颜色的混合，颜色背景和图片红色的混合 | ||
fit | BoxFit | fit:属性用来控制图片的拉伸，并充满父容器来的。 | |
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 | |||
BoxFit.contain:全屏显示，显示原比例，可能会有空隙。 | |||
BoxFit.cover:显示可能会拉伸，可能会裁切，充满(图片要充满整个容器，还不变化) | |||
BoxFit.fitWidth:容器充满（横向充满），显示器可拉伸，可能裁切。 | |||
BoxFit.fitHeight:高度充满(竖向充满)，显示可能拉伸，可能裁切 | |||
BoxFit.scaleDown：效果和contain差不多，但是此竖向不允许显示超过原图片大小，可小不可大。 | |||
repeat | 平铺 | ImageRepeat.repeat:横向和纵向都进行重复，知道铺满整个画布。 | |
ImageRepeat.repeatX:横向重复，纵向不重复 | |||
ImageRepeat.repeatY: 纵向重复，横向不重复 | |||
width | 宽度，一般结合CilpOval才能看到效果 | ||
height | 高度，一般结合CilpOval才能看到效果 |
运行效果：
