Flutter实现左上右上圆角的左上右三边白色边框需求

你可以通过Container的decoration属性直接配置，精准实现需求：

Container(
  child: YourChildWidget(), // 替换成你的目标子组件
  decoration: BoxDecoration(
    // 可根据需求替换背景色，若父容器背景与边框色一致可省略
    color: Colors.grey[200],
    // 设置左上角、右上角圆角
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
    ),
    // 仅显示左、右、上三个方向的白色边框
    border: const Border(
      left: BorderSide(color: Colors.white, width: 1),
      right: BorderSide(color: Colors.white, width: 1),
      top: BorderSide(color: Colors.white, width: 1),
      // 底部不设置BorderSide，默认无边框
    ),
  ),
)

如果遇到圆角处边框显示不完整的情况（比如背景色与边框色差异导致的视觉问题），可以用ClipRRect嵌套Container的方式优化：

ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(12),
    topRight: Radius.circular(12),
  ),
  child: Container(
    child: YourChildWidget(),
    decoration: const BoxDecoration(
      border: Border(
        left: BorderSide(color: Colors.white, width: 1),
        right: BorderSide(color: Colors.white, width: 1),
        top: BorderSide(color: Colors.white, width: 1),
      ),
    ),
  ),
)

调整Radius.circular的数值可以改变圆角大小，修改BorderSide的width可以调整边框粗细。

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