flutter 图片Image实现圆角的四种方法

image

开发中，对图片进行圆角处理，是很常见的需求，下面提供四种方法实现圆角效果，控件倒圆角也可以应用

flutter中可以使用Container特性、CircleAvatar的backgroundImage、ClipOval组件、ClipRRect组件实现圆角效果
1、使用Container的特性，进行裁剪实现圆角

    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、使用CircleAvatar 的 backgroundImage 属性实现圆角

    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、使用 ClipOval 组件来实现圆角

    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、使用ClipRRect组件为图片实现圆角

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

flutter 图片Image实现圆角的四种方法

posted @ 2022-09-27 14:38  似水流云  阅读(2572)  评论(0)  编辑  收藏  举报