Flutter 设置圆角的几种方案

通过设置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),
         ),
      )
    );

image.png

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

通过ClipRRect组件实现

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

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