Quatro métodos de vibração da imagem Imagem para obter cantos arredondados

No flutter, você pode usar o recurso Container, backgroundImage de CircleAvatar, o componente ClipOval e o componente ClipRRect para obter um efeito de canto arredondado no controle

1. Use as características do Container para cortar e obter cantos arredondados

    Container(
      width: 100,
      height: 100,
      //超出部分，可裁剪
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
      ),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        fit: BoxFit.cover,
      ),
    )

2. Use a propriedade backgroundImage do CircleAvatar para obter cantos arredondados

    CircleAvatar(
      radius: 50,
      backgroundColor: Colors.white, //未设置背景色，加载图片时会显示红色
      backgroundImage: NetworkImage(
          "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
    );

3. Use ClipOval para obter cantos arredondados

    ClipOval(
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )

4. Use o componente ClipRRect para obter cantos arredondados para imagens

    ClipRRect(//是ClipRRect，不是ClipRect
      borderRadius: BorderRadius.circular(50),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )