给容器增加圆角的几种实现

Container实现

1
2
3
4
5
6
7
8
9
Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Column(
      children: _rows(context),
    ),
  );

通过PhysicalModel组件实现

1
2
3
4
5
6
7
8
9
10
11
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),
         ),
      )
    );

通过ClipRRect组件实现

1
2
3
4
5
6
7
8
9
10
ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: Container(
        color: Colors.red,
        child: Column(
          children: _rows(context),
        ),
      ),
    )

给图片增加圆形的几种实现

使用Container的特性，进行裁剪实现圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
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,
     ),
   )

使用CircleAvatar 的 backgroundImage 属性实现圆角

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

使用 ClipOval 组件来实现圆角

1
2
3
4
5
6
7
8
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,
      ),
    )

使用ClipRRect组件为图片实现圆角

1
2
3
4
5
6
7
8
9
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,
     ),
   )

给图片增加圆角的几种实现

ClipRRect

1
2
3
4
5
6
7
8
ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)

Container + BoxDecoration

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//斜切角形状示例
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')
    )
  )
)

转自: (https://blog.51cto.com/jdsjlzx/5574937)[https://blog.51cto.com/jdsjlzx/5574937]