从 OutlineInputBorder 中删除特定的边框边答案

【问题标题】：Removing Specific Border Side from OutlineInputBorder从 OutlineInputBorder 中删除特定的边框边
【发布时间】：2020-06-09 10:39:24
【问题描述】：

我的目标是在彼此上方显示两个文本字段，并在它们周围加上实线边框。不幸的是，我无法指定顶部文本字段不应该有底部边框。下图显示了当前的状态。在两个文本字段之间，有一个粗边框，其大小是两个文本字段的单个边框大小的两倍。

我现在的问题是：是否有一种简单的方法可以通过分别从第一个文本字段中删除底部边框或从第二个文本字段中删除顶部边框来使两个文本字段之间的边框与标准边框的大小相同？

对应的代码如下：

body: Column(
children: <Widget>[
  Container(
    padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
    child: TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xffff8f00),
        enabledBorder: const OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.white,
            width: 3.0,
            //style: BorderStyle.none,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20),
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.white, width: 3.0),
          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,
    ),
  ),
],
),

【问题讨论】：

如果你有任何装饰的 BorderRadius，我认为你无法做到这一点。相反，您可以尝试将底部文本字段翻译为与顶部边框重叠。我希望我说得通。
为了强调@SudhanshuBhagwat 所说的内容，您基本上都可以将字段包装在 Stack 中以重叠它们并通过定位对齐它们以获得相同的轮廓大小

标签： flutter flutter-layout

【解决方案1】：

这是您的解决方案：

Container(
        color: Color(0xffff8f00),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.white, width: 3)
          ),
          clipBehavior: Clip.antiAlias,
          margin: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  filled: true,
                  border: InputBorder.none,
                  hintText: "Email or username",
                  hintStyle: TextStyle(
                    fontSize: 16,
                    color: Colors.white70,
                  ),
                ),
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Divider(
                color: Colors.white,
                thickness: 3,
              ),
              TextField(
                decoration: InputDecoration(
                  filled: true,
                  border: InputBorder.none,
                  // enabledBorder: 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,
                ),
              ),
            ],
          ),
        ),
      ),

【讨论】：