Flutter-实现圆角图像

1.实现圆角头像

方式一：CircleAvatar

  CircleAvatar buildCircleAvatar() {
    return CircleAvatar(
      radius: 100,
      backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
      child: Container(
        alignment: Alignment(0,.5),
        width: 200,
        height: 200,
        child: Text("兵长利威尔"),
      ),
    );
  }

image.png

方式二：ClipOval

• ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

  ClipOval get buildClipOval {
    return ClipOval(
      child: Image.network(
        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
        width: 200,
        height: 200,
      ),
    );
  }

image.png

方式三：Container+BoxDecoration

 Container buildContainerRadius() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        image: DecorationImage(
          image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        ),
      ),
    );
  }

image.png

2.实现圆角图片

方式一：ClipRRect

• ClipRRect用于实现圆角效果，可以设置圆角的大小。

ClipRRect buildClipRRect() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Image.network(
        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
        width: 200,
        height: 200,
      ),
    );
  }

image.png

方式二：Container+BoxDecoration

Container buildContainerRadius() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        ),
      ),
    );
  }

image.png

学习内容来自Flutter从入门到实战