如何移除OutlineInputBorder指定侧边边框？解决TextField边框重叠问题

嘿，这个边框重叠的问题我之前也碰到过！其实解决起来超简单，咱们只要把其中一个TextField的相邻边框去掉就行——要么让顶部的TextField不显示底部边框，要么让底部的TextField不显示顶部边框，这样中间就不会出现双重粗细的边框了。我给你改好了代码，直接替换现有代码就能生效：

最优方案：移除顶部TextField的底部边框 #

这个方案最直观，因为顶部TextField本来就只需要圆角在上，所以我们直接修改它的enabledBorder和focusedBorder，把底部边框设为BorderSide.none，这样它就只会显示上、左、右三个边框，和底部TextField的顶部边框完美衔接：

body: Column(
  children: <Widget>[
    Container(
      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
      child: TextField(
        decoration: InputDecoration(
          filled: true,
          fillColor: Color(0xffff8f00),
          // 修改enabledBorder：隐藏底部边框
          enabledBorder: OutlineInputBorder(
            border: Border(
              top: BorderSide(color: Colors.white, width: 3.0),
              left: BorderSide(color: Colors.white, width: 3.0),
              right: BorderSide(color: Colors.white, width: 3.0),
              bottom: BorderSide.none, // 关键：移除底部边框
            ),
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
          ),
          // 修改focusedBorder：同样隐藏底部边框
          focusedBorder: OutlineInputBorder(
            border: Border(
              top: BorderSide(color: Colors.white, width: 3.0),
              left: BorderSide(color: Colors.white, width: 3.0),
              right: BorderSide(color: Colors.white, width: 3.0),
              bottom: BorderSide.none,
            ),
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
          ),
          hintText: "Email or username",
          hintStyle: TextStyle(
            fontSize: 16,
            color: Colors.white70,
          ),
        ),
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w700,
        ),
        controller: myEmailUsernameController,
      ),
    ),
    Container(
      padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
      child: TextField(
        decoration: InputDecoration(
          filled: true,
          fillColor: Color(0xffff8f00),
          enabledBorder: const OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white, width: 3.0),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          focusedBorder: const OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white, width: 3.0),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          hintText: "Password",
          hintStyle: TextStyle(
            fontSize: 16,
            color: Colors.white70,
          ),
        ),
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w700,
        ),
        obscureText: showPW,
        controller: myPasswordController,
      ),
    ),
  ],
),

备选方案：移除底部TextField的顶部边框 #

如果你更倾向于保留顶部TextField的完整边框（虽然视觉上没必要），也可以修改底部TextField的enabledBorder和focusedBorder，移除它的顶部边框，代码如下：

// 底部TextField的enabledBorder修改为：
enabledBorder: OutlineInputBorder(
  border: Border(
    bottom: BorderSide(color: Colors.white, width: 3.0),
    left: BorderSide(color: Colors.white, width: 3.0),
    right: BorderSide(color: Colors.white, width: 3.0),
    top: BorderSide.none, // 移除顶部边框
  ),
  borderRadius: BorderRadius.only(
    bottomLeft: Radius.circular(20),
    bottomRight: Radius.circular(20),
  ),
),
// focusedBorder做同样修改即可

小优化：让输入框完全贴合 #

如果想让两个输入框之间没有缝隙，还可以把顶部Container的padding从EdgeInsets.fromLTRB(20,20,20,0)改成EdgeInsets.fromLTRB(20,20,20,-3)（因为你的边框宽度是3，负padding刚好抵消缝隙），这样视觉上两个输入框完全连在一起，边框更连贯。

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