Flutter解决圆角+边框导致圆角部分的边框展示不全的问题

前言

在UI开发中，设计稿中经常有既有边框，又有圆角的设计，在flutter中，设置圆角和边框都很简单，但是要把这两个合起来，则会出现圆角的部分的border展示不出来的问题

1、圆角+无边框
原理：设置圆角+设置子内容

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: 
       Container(
        width: 100,height: 100,
        color: Colors.orange,)
)

圆角+无边框

2、展示有边框+无圆角
原理：设置边框+不设置子内容

Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
              ),
            );

展示边框

3、边框+填充颜色+无圆角
原理：设置边框+设置子内容

Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
              ),
              child: Container(color: Colors.green),
            );

边框+填充颜色+无圆角

4、展示圆角+边框+无填充
原理：设置圆角+边框，没有子内容

Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
                borderRadius: BorderRadius.circular(20)
              ),
            );

展示圆角+边框+无填充

5、展示圆角+边框+有填充（有瑕疵）
5.0 容器子内容缩小显示，本身有颜色和背景,如果有子类且子类显示与要颜色区别，就会展示成5.1的用样子

Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
                borderRadius: BorderRadius.circular(20),
                color: Colors.green
              ),
            );

圆角+边框

5.1 填充部分的角没有被切除
原理：圆角边框一起设置

Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
                borderRadius: BorderRadius.circular(20)
              ),
              child: Container(color: Colors.green),
            );

填充部分的角没有被切除

5.2 圆角处边框展示不全
原理：圆角套边框

ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Container(
              padding: EdgeInsets.all(0.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange,width: 5),
              ),
              child: Container(color: Colors.green),
            ),
    );

圆角处border展示不全

6、展示圆角+边框（完美），
原理：有圆角的大容器套小容器造一个假的边框，让父容器的颜色成为边框颜色

double border = 5;
double radius = 20;
ClipRRect(borderRadius: BorderRadius.circular(radius),
        child: Container(color: Colors.orange,width: 100,height: 100,
          padding: EdgeInsets.all(border),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(radius-border),
            child: Container(color: Colors.green,),),
        ),);

圆角+边框

Flutter解决圆角+边框导致圆角部分的边框展示不全的问题

前言

推荐阅读更多精彩内容