flutter中图片的使用

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,
  ),
),