如何在Flutter中制作圆角文本框？

Question

Material Design在iOS上看起来不太好，特别是TextField。那么有没有办法创建自己的TextField？或者有没有办法添加一些样式到TextField上，让它看起来更加圆润？

- Tushar Pol

Answer 1

你可以在decoration参数中为TextField添加圆角。

TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      filled: true,
      hintStyle: TextStyle(color: Colors.grey[800]),
      hintText: "Type in your text",
      fillColor: Colors.white70),
)

- Rockvole

---

如果您只想为文本字段使用圆形边框，请改用 BorderRadius.circular() 而不是 BorderRadius.all()。 - Fardeen Khan

有什么想法可以改变边框颜色吗？ - Abdulmalek Dery

Answer 2

@Rockvole的答案是正确的，但如果您不喜欢TextField周围的默认边框，您可以通过覆盖OutlineInputBorder的borderSide属性来实现，像这样：

TextField(
    textAlign: TextAlign.center,
    controller: searchCtrl,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
        hintText: 'Enter a product name eg. pension',
        hintStyle: TextStyle(fontSize: 16),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(
                width: 0, 
                style: BorderStyle.none,
            ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
        fillColor: colorSearchBg,
    ),
),

- Aryeetey Solomon Aryeetey

---

你可以使用Borderside.none。 - Caleb Lindsey

Answer 3

通过使用Container，您可以获得所需的输出。看一下...

new Container(
  child: new Text (
      "Text with rounded edges.",
      style: new TextStyle(
          color: Colors.blue[500],
          fontWeight: FontWeight.w900
      )
  ),
  decoration: new BoxDecoration (
      borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
      color: Colors.black
  ),
  padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
),

- DwlRathod

---

为什么不直接使用new EdgeInsets.all(16.0)呢？DRY！ - Randal Schwartz

是的，那也可以。@RandalSchwartz 的问题是关于Flutter中圆角TextField的。那个padding是一些额外的东西。 - DwlRathod

使用一个边框线是更好的解决方案，就像其他答案中指出的那样。 - siega

我同意@ siega的观点。在TextField上使用容器是一种过度设计。您可以始终使用OutlineInputBorder来实现相同的效果。但是，当您想要为TextField设置圆角填充颜色时，可以使用容器。 - Fardeen Khan

Answer 4

你可以尝试下面的代码：

你可以尝试下面的代码：

      decoration:  InputDecoration(
         border: OutlineInputBorder(
             borderRadius: const BorderRadius.all(
                const Radius.circular(10.0), 
             ),
             borderSide: BorderSide(
              width: 0, 
              style: BorderStyle.none,
              ),
             ),
           )

- MD MEHEDI HASAN

---

从评论中可以看出，Stack Overflow 不鼓励仅包含代码的回答，因为它们无法解释如何解决问题。请编辑您的答案，解释这段代码的作用以及如何回答问题，以便对提问者和其他遇到类似问题的用户有所帮助。请参阅：如何撰写好的答案？。谢谢。 - sɐunıɔןɐqɐp

Answer 5

我从网络上收集了几种方法和解决方案，并整合出了这个解决方案。它对我非常有效，希望能帮助到其他人：

这个解决方案可以控制TextField的宽度、高度和其他属性。

Container(
    child: Theme(
      data: Theme.of(context).copyWith(splashColor: Colors.transparent),
      child: TextField(
        autofocus: false,
        style: TextStyle(fontSize: 15.0, color: Color(0xFFbdc6cf)),
        decoration: InputDecoration(
          filled: true,
          fillColor: Colors.white,
          hintText: 'Search',
          contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 0.0),


          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),

          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),
        ),
      ),
    ),

    decoration: new BoxDecoration (
      borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
      color: Colors.white   ),   width: 250,   height: 50,   margin: new EdgeInsets.fromLTRB(20, 20, 20, 210),   padding: new EdgeInsets.fromLTRB(8, 8, 8, 8),

),

- Mohammed H. Hannoush

Answer 6

您可以通过几种不同的方式来实现目的：

第一种方法：

Container(
      child: new Text (
          "Some Text",
          style: TextStyle(
              color: Colors.black
          )
      ),
      decoration: BoxDecoration (
          borderRadius: BorderRadius.all( Radius.circular(15)),
          color: Colors.white
      ),
      padding: EdgeInsets.all(16.0),
    ),

第二种方法：

 TextField(
      decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          filled: true,
          hintStyle: new TextStyle(color: Colors.grey[600]),
          hintText: "Hint text",
          fillColor: Colors.white),
    )

第三种方法：

TextField(
    textAlign: TextAlign.center,
    controller: someTextXontroller,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
        hintText: 'Hint Text',
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(
                width: 0, 
                style: BorderStyle.none,
            ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
        fillColor: Colors.blue,
    ),
),

- Javad Moradi

---

不错，你的第三种方法对我很有帮助，特别是制作自定义的BorderSide。谢谢！ - Cassius Pacheco

Answer 7

在TextFormField中尝试这个：

border: OutlineInputBorder(
     borderRadius: BorderRadius.all(
         Radius.circular(20.0),
     ),
),

- RS Bind