Flutter 设置圆角的几种方案

Posted 2022-08-12 一叶飘舟

通过设置Container的decoration装饰器来实现

Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Column(
      children: _rows(context),
    ),
  );

这种方式设置的圆角如果显示在四角的子控件设置了渐变，将会影响圆角显示

通过PhysicalModel组件实现

PhysicalModel(
      borderRadius: BorderRadius.circular(10),
      color: Colors.transparent,
      clipBehavior: Clip.hardEdge,
      child: Container(
        margin: EdgeInsets.only(left: 4,top: 0,right: 0,bottom: 0), // margin 的四边如果设置了大于0的值，会影响圆角的显示
        child: Column(
          children: _rows(context),
         ),
      )
    );

上图可以看到我们设置了margin的left为4后，左边的圆角明显显示有问题，被截了一部分

通过ClipRRect组件实现

这种方式添加的圆角不会被子控件覆盖

ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: Container(
        color: Colors.red,
        child: Column(
          children: _rows(context),
        ),
      ),
    )

图片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 图片、圆形头像、圆角图片....各种形状

圆形头像

方式1: CircleAvatar

CircleAvatar(
  //头像半径
  radius: 60,
  //头像图片 -> NetworkImage网络图片，AssetImage项目资源包图片, FileImage本地存储图片
  backgroundImage: NetworkImage(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
  ),
)

方式2: ClipOval

ClipOval(
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

方式3: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
      fit: BoxFit.cover
    )
  )
)

圆角图片

 
方式1: ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)

方式2: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

各种形状

 

使用ShapeDecoration可以做出各种形状

斜切角: BeveledRectangleBorder
圆角: RoundedRectangleBorder
超椭圆: SuperellipseShape
体育场: StadiumBorder
圆形: CircleBorder

//斜切角形状示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)