Question

这就是我想要做的：

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

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

更新：显然可以使用

轻松完成

new InputDecoration.collapsed(...),

保留提示而不绘制边框。

Answer 1

这样做：

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

或者如果您需要其他类似图标的内容，请使用InputBorder.none

设置边框

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

Answer 2

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

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

Answer 3

以下是补充答案，其中显示了更完整的代码：

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius: BorderRadius.all(Radius.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属性，但是我无法使它们具有拐角半径，因此我改用了容器。

Answer 4

以上答案均不适用于新的fld sdk，因为在集成了网络和桌面支持后，您需要像这样单独指定

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: sLabel),
  )

Answer 5

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

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)),
      ),
    ),
 ),

Answer 6

将焦点边框更改为无边框

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

Answer 7

TextField小部件具有一个属性装饰，该属性具有一个子属性TextField。此属性将在Flutter应用中删除border的文本输入底划线。因此您可以将TextField的decoration的{{1}}属性设置为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')
            )
    )

Answer 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),
            ),
          ),
        ),

Answer 9

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

Answer 10

我正在使用TextField颤振控件。我使用以下方法输入了用户输入的内容。

onChanged:(value){
}

Answer 11

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

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

11 个答案: