Flutter：如何制作带有 HintText 但没有下划线的 TextField？答案

【问题标题】：Flutter: how to make a TextField with HintText but no Underline?Flutter：如何制作带有 HintText 但没有下划线的 TextField？
【发布时间】：2018-08-08 23:44:31
【问题描述】：

这就是我想要做的：

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

无论文本字段是否聚焦，我都不想要任何下划线。

更新：更新了已接受的答案，以反映 Flutter SDK 自 2020 年 4 月以来的变化。

【问题讨论】：

标签： flutter dart textfield underline hint

【解决方案1】：

这样做：

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

或者如果你需要其他东西，比如图标，用InputBorder.none设置边框

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

【讨论】：

不导入material包可以吗？即对于Cupertino 主题？
我想避免：InputDecoration' can't be assigned to the parameter type 'BoxDecoration' 类型错误
'此功能在 v1.13.2 之后已弃用。'在文档中
我们可以将此标记为真正的解决方案吗？在 Flutter 2.2.0 中正式使用

【解决方案2】：

新的 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"),
  )

【讨论】：

应用此解决方案后如何给出半径？
@JayTillu 这个视频很好地展示了它：youtu.be/3zddqfn0dfc
或者你可以只使用一个border: InputBorder.none来关闭各种边框（即focusedBorder、enabledBorder、errorBorder、disabledBorder）。
即使对于 TextFormField，使用它也会减少 100% 的边框。你可以为你的组件设置样式或让无状态的小部件组件由你决定

【解决方案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 也有 filled 和 fillColor 属性，但我无法让它们具有圆角半径，因此我使用了容器。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

将焦点边框更改为无

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

【讨论】：

【解决方案6】：

TextField 小部件有一个属性装饰，它有一个子属性border: InputBorder.none。此属性将删除 Flutter 应用中的 TextField 文本输入底部下划线。因此，您可以将 TextField 的 decoration 的 border 属性设置为 InputBorder.none，示例见此处：

border: InputBorder.none：隐藏文本输入小部件的底部下划线。

 Container(
        width: 280,
        padding: EdgeInsets.all(8.0),
        child : TextField(
                autocorrect: true,
                decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter Some Text Here')
            )
    )

【讨论】：

【解决方案7】：

您可以根据需要使用Flutter Form 的TextFormField 小部件。

TextFormField(
     maxLines: 1,
     decoration: InputDecoration(
          prefixIcon: const Icon(
              Icons.search,
              color: Colors.grey,
          ),
      hintText: 'Search your trips',
      border: OutlineInputBorder(
         borderRadius: BorderRadius.all(Radius.circular(10.0)),
      ),
    ),
 ),

【讨论】：

【解决方案8】：

            Container(
         height: 50,
          // margin: EdgeInsets.only(top: 20),
          decoration: BoxDecoration(
              color: Colors.tealAccent,
              borderRadius: BorderRadius.circular(32)),
          child: TextFormField(
            cursorColor: Colors.black,
            // keyboardType: TextInputType.,
            decoration: InputDecoration(
              hintStyle: TextStyle(fontSize: 17),
              hintText: 'Search your trips',
              suffixIcon: Icon(Icons.search),
              border: InputBorder.none,
              contentPadding: EdgeInsets.all(18),
            ),
          ),
        ),

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

【讨论】：

这个答案和一个月前的@E. Sun's answer有什么区别？
你想要新的东西吗？
如果已经提供答案，则无需再次提交。这样做只会给未来的读者增加噪音，因为他们需要对多个相似的答案进行分类。将来，一旦您获得了更多的声誉，您就可以对现有答案进行投票；这是验证方法并确认解决方案有效的首选方式。
我应该注意到，有时，如果贡献者有不同的解释方式或想要添加更多细节，他们仍然会发布类似的建议。这完全没问题。这里的问题是，您似乎提供了 same 答案，但细节less，因此它对线程的贡献不大。

【解决方案11】：

我使用的是 TextField 颤振控件。我使用以下方法获得了用户键入的输入。

onChanged:(value){
}

【讨论】：