Flutter中如何为Container的特定区域设置圆角边框？

你遇到的报错是因为Flutter要求设置borderRadius时，border必须是统一结构的边框（即四个边都要有明确的BorderSide定义，不管是否显示）。直接只设置左、下、右三边的话，border结构不完整，所以无法配合borderRadius使用。这里给你两种简单的解决方法：

方法一：补全Border结构，隐藏不需要的边框 #

给Border补充上边框的定义，将其设为BorderSide.none，这样既满足统一结构的要求，又能隐藏上边框，同时圆角可以正常生效：

Container(
  width: double.infinity,
  height: 100,
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    border: Border(
      left: BorderSide(width: 1, color: Colors.black),
      bottom: BorderSide(width: 1, color: Colors.black),
      right: BorderSide(width: 1, color: Colors.black),
      top: BorderSide.none, // 隐藏上边框
    ),
  ),
)

方法二：用ClipRRect裁剪圆角 #

如果你不想修改Border结构，可以用ClipRRect包裹Container，通过裁剪实现圆角效果：

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Container(
    width: double.infinity,
    height: 100,
    decoration: const BoxDecoration(
      color: Colors.white,
      border: Border(
        left: BorderSide(width: 1, color: Colors.black),
        bottom: BorderSide(width: 1, color: Colors.black),
        right: BorderSide(width: 1, color: Colors.black),
      ),
    ),
  ),
)

两种方法都能实现你要的左、下、右三边带圆角的效果，选哪种都可以。

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