Flutter:如何使用HintText创建TextField但没有下划线？

Question

这就是我想要做的:

在文本字段的Flutter文档(https://flutter.io/text-input/)中,它表示您可以通过传递null到装饰来删除下划线.但是,这也摆脱了提示文本.

我不想强调文本字段是否有焦点.

更新:显然这可以通过使用轻松完成

new InputDecoration.collapsed(...),

它保留提示而不绘制边框.

Answer 1

新的 flutter sdk，因为在集成了 Web 和桌面支持之后，您需要像这样单独指定

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: "Hint here"),
  )

Answer 2

如果还有人在苦苦挣扎,那就这么做吧

TextField(
  decoration: new InputDecoration.collapsed(
    hintText: 'Username'
  ),
),

或者如果您需要其他类似图标的东西,请设置边框 InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),

Answer 3

这是一个补充答案，显示了一些更完整的代码：

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius:  BorderRadius.circular(32),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 17),
        hintText: 'Search your trips',
        suffixIcon: Icon(Icons.search),
        border: InputBorder.none,
        contentPadding: EdgeInsets.all(20),
      ),
    ),
  ),

笔记：

• 深色背景（代码未显示）是Colors.teal.
• InputDecoration也有filledandfillColor属性，但我无法让它们具有圆角半径，所以我改用了容器。

Answer 4

我发现没有其他答案给出边界半径，你可以简单地这样做，没有嵌套 Container

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

Answer 5

要去除 Flutter 中的 TextField 下划线边框，只需设置border为 InputBorder.none。

TextField(
  decoration: InputDecoration(
    hintText: 'Hint Text',
    border: InputBorder.none,
  ),
)

Answer 6

TextField(style: TextStyle(color: Colors.black45,fontSize: 18,decorationThickness: 0.0))。
它显示时不带下划线decorationThickness:0.0。

Answer 7

change the focused border to none

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),

Answer 8

为了制作无边框 TextFormField，我找到了以下解决方案：

不使用容器。

TextFormField(
      decoration: InputDecoration(
          border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(15.0),
                         borderSide: BorderSide.none,
                            ),

           labelText: "Student email/id",
           floatingLabelStyle: const TextStyle(
                                    height: 4,
                                    color: Color.fromARGB(255, 160, 26, 179)),
                                
           filled: true,
           fillColor: Colors.grey[200],
           prefixIcon: const Icon(Icons.person),
                ),
           ),

样品通常：

当输入错误时：

当用户输入时：