如何在使用border属性时为Container添加指定边角的圆角边框

直接在BoxDecoration里同时设置border和borderRadius会报错，因为Border类无法和BorderRadius兼容。你需要改用RoundedRectangleBorder来整合边框和圆角的设置，具体修改如下：

替换你原来的decoration配置，用shape属性指定RoundedRectangleBorder，在里面同时定义边框样式和需要的圆角：

return Container(
  width: size.width,
  height: size.height,
  decoration: BoxDecoration(
    shape: RoundedRectangleBorder(
      // 保留你原来的底部边框设置
      side: const BorderSide(width: 2, color: constants.Colors.purpleMain),
      // 指定需要圆角的边角，示例为左上角和右上角
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(12),
        topRight: Radius.circular(12),
      ),
    ),
  ),
  alignment: Alignment.center,
  // 这里添加你的子组件
);

自定义圆角位置 #

如果需要给其他边角加圆角，修改BorderRadius.only的参数即可，可选参数包括：

• topLeft
• topRight
• bottomLeft
• bottomRight

比如要给右下角和左下角加圆角：

borderRadius: const BorderRadius.only(
  bottomLeft: Radius.circular(16),
  bottomRight: Radius.circular(16),
),

结合index条件调整 #

如果需要根据index值切换圆角样式，直接给borderRadius加条件判断就行：

borderRadius: index == 0
    ? const BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12))
    : const BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12)),

内容的提问来源于stack exchange，提问作者Max