Flutter/Dart：如何移除TextFormField指定侧边边框并避免重叠？

你遇到的问题是因为默认OutlineInputBorder即便设置了圆角，相邻边框的线条仍会重叠。下面提供两种实用解决方案，同时保留必填校验：

方法一：Container自定义边框+偏移抵消 #

放弃TextField自带的border属性，用外层Container的BoxDecoration单独控制每条边框，再微调第二个TextField的外边距抵消重叠：

Row(
  children: [
    // 第一个TextField：仅保留左、上、下边框
    Expanded(
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: BorderSide(color: Colors.grey.shade400, width: 1),
            top: BorderSide(color: Colors.grey.shade400, width: 1),
            bottom: BorderSide(color: Colors.grey.shade400, width: 1),
            right: BorderSide.none, // 去掉右边框
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(4),
            bottomLeft: Radius.circular(4),
          ),
        ),
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none, // 取消TextField自带边框
            hintText: "第一个字段",
            contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          ),
          validator: (value) { // 保留必填校验
            if (value == null || value.isEmpty) {
              return "此字段必填";
            }
            return null;
          },
        ),
      ),
    ),
    // 第二个TextField：仅保留右、上、下边框，左移1像素抵消重叠
    Expanded(
      child: Container(
        margin: EdgeInsets.only(left: -1), // 关键：向左偏移1像素
        decoration: BoxDecoration(
          border: Border(
            right: BorderSide(color: Colors.grey.shade400, width: 1),
            top: BorderSide(color: Colors.grey.shade400, width: 1),
            bottom: BorderSide(color: Colors.grey.shade400, width: 1),
            left: BorderSide.none, // 去掉左边框
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(4),
            bottomRight: Radius.circular(4),
          ),
        ),
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "第二个字段",
            contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          ),
          validator: (value) { // 保留必填校验
            if (value == null || value.isEmpty) {
              return "此字段必填";
            }
            return null;
          },
        ),
      ),
    ),
  ],
)

方法二：自定义InputBorder（适配状态切换） #

如果需要保留TextField的enabledBorder/focusedBorder状态切换效果，可以自定义InputBorder类精确控制边框绘制范围：

class CustomLeftBorder extends OutlineInputBorder {
  const CustomLeftBorder({
    BorderSide borderSide = const BorderSide(),
    BorderRadius borderRadius = const BorderRadius.all(Radius.circular(4)),
  }) : super(borderSide: borderSide, borderRadius: borderRadius);

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    // 只绘制左、上、下边框
    final path = Path()
      ..moveTo(rect.left, rect.bottom)
      ..lineTo(rect.left, rect.top)
      ..lineTo(rect.right, rect.top)
      ..lineTo(rect.right, rect.bottom);
    canvas.drawPath(path, borderSide.toPaint());
    // 绘制左上、左下圆角
    canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        rect.left,
        rect.top,
        rect.right,
        rect.bottom,
        topLeft: borderRadius.topLeft,
        bottomLeft: borderRadius.bottomLeft,
      ),
      borderSide.toPaint(),
    );
  }
}

class CustomRightBorder extends OutlineInputBorder {
  const CustomRightBorder({
    BorderSide borderSide = const BorderSide(),
    BorderRadius borderRadius = const BorderRadius.all(Radius.circular(4)),
  }) : super(borderSide: borderSide, borderRadius: borderRadius);

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    // 只绘制右、上、下边框
    final path = Path()
      ..moveTo(rect.left, rect.top)
      ..lineTo(rect.right, rect.top)
      ..lineTo(rect.right, rect.bottom)
      ..lineTo(rect.left, rect.bottom);
    canvas.drawPath(path, borderSide.toPaint());
    // 绘制右上、右下圆角
    canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        rect.left,
        rect.top,
        rect.right,
        rect.bottom,
        topRight: borderRadius.topRight,
        bottomRight: borderRadius.bottomRight,
      ),
      borderSide.toPaint(),
    );
  }
}

使用示例：

Row(
  children: [
    Expanded(
      child: TextField(
        decoration: InputDecoration(
          enabledBorder: CustomLeftBorder(
            borderSide: BorderSide(color: Colors.grey.shade400),
            borderRadius: BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4)),
          ),
          focusedBorder: CustomLeftBorder(
            borderSide: BorderSide(color: Colors.blue, width: 2),
            borderRadius: BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4)),
          ),
          hintText: "第一个字段",
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return "此字段必填";
          }
          return null;
        },
      ),
    ),
    Expanded(
      child: TextField(
        decoration: InputDecoration(
          enabledBorder: CustomRightBorder(
            borderSide: BorderSide(color: Colors.grey.shade400),
            borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
          ),
          focusedBorder: CustomRightBorder(
            borderSide: BorderSide(color: Colors.blue, width: 2),
            borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
          ),
          hintText: "第二个字段",
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return "此字段必填";
          }
          return null;
        },
      ),
    ),
  ],
)

第一种方法简单易上手，第二种更适合需要保持原生TextField状态样式的场景，两种方案都能彻底解决边框重叠问题，同时保留必填校验逻辑。

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