Image中三个重要的属性:
alignment:图片的对齐方式
fit:图片的展示方式
repeat:图片平铺方式
Image.network("https://s3.ax1x.com/2020/12/15/rKiXxs.png",
alignment: Alignment.bottomRight, //图片的对齐方式
fit: BoxFit.cover, //图片全屏展示,会剪切部分图片,但是不会变形
//fit: BoxFit.fill, //图片全屏显示,会变形
//fit: BoxFit.fitHeight, //高会充满整个容器,但是会剪切掉部分图片
//fit:BoxFit.fitWidth, //宽会充满整个屏幕,图片变形
//repeat: ImageRepeat.repeat, // 平铺
repeat: ImageRepeat.repeatY, //纵向平铺
)
圆角图片:第一种方式
Container( //将image放到一个Container,可以设置图片的宽高等属性
width: 400,
height: 400,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(200), //可以改变大小设置为圆角矩形
color: Colors.redAccent,
image: DecorationImage(
image: NetworkImage("https://s3.ax1x.com/2020/12/15/rKiXxs.png"),
fit: BoxFit.cover,
),
),
),
效果图
圆角图片:第二种方式
ClipOval(
child: Image.network("https://s3.ax1x.com/2020/12/15/rKiXxs.png",
width: 300,
height: 300,
fit: BoxFit.cover,
),
),