flutter图片实现圆形的四种方法

最新推荐文章于 2024-07-25 17:28:04 发布

大圣归来~

最新推荐文章于 2024-07-25 17:28:04 发布

阅读量3.3k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/RreamigOfGirls/article/details/127257250

版权

Flutter 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

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