Flutter TextField 去除边框

Question

我正在尝试从Flutter的TextField中去除边框轮廓，但似乎找不到语义上的方法来实现。

                        decoration: InputDecoration(
                        labelStyle: const TextStyle(color: Colors.black),
                        contentPadding: const EdgeInsets.only(left: 25),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(40.0),
                        ),

任何帮助都非常感激。这个问题让我一片空白。

*编辑需要保持BorderRadius.circular的活动状态。

**编辑正在寻找删除TextInput周围的黑线。

- Will

Answer 1

您可以删除TextField的边框轮廓线。

以下是一些示例，可能会对您有所帮助：

 TextFormField(
        decoration: new InputDecoration(
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
            disabledBorder: InputBorder.none,),


TextField(
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        hintText: "Hint here"),)

- Ethan Thai

Answer 2

我必须将 border 修改为这样：

 border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                          ),

保持BorderRadius.circular的同时也删除轮廓线。

- Will

---

borderSide: BorderSide.none可以完成任务，而且更短更易读。 - Umberto Fontanazza

Answer 3

在您的文本框中，执行以下操作：

 TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderSide: BorderSide.none,
            borderRadius: BorderRadius.circular(17)
         ),
      ),
    );
  }

这将使您的文本字段呈圆形，并去除边框。

- Ali

---

请记住，Stack Overflow 不仅旨在解决当前的问题，还要帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者和不熟悉语法的成员来说，这尤其重要。鉴于此，您能否编辑您的答案，包括您正在做什么的解释以及为什么您认为这是最好的方法？ - Jeremy Caney

Answer 4

只需将 border: InputBorder.none 更改为以下内容即可：

- Adhitya Bagasmiwa Permana

---

哎呀，我应该补充一下，需要保持BorderRadius.circular的活动状态。 - Will

请问您能展示一下设计吗？我对您的问题感到有些困惑。 - Adhitya Bagasmiwa Permana

没问题。我刚刚上传了一张图片到原帖中，以帮助解释我想要摆脱的东西。 - Will

在 OutlineInputBorder 内部，尝试添加以下内容：borderSide: BorderSide(color: Colors.transparent)。 - Adhitya Bagasmiwa Permana

这个不行。BorderSide似乎无法为边框的任何部分设置样式。 - Will