颤振:如何使一个TextField与HintText但没有下划线?

这就是我想做的:

enter image description here

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

我不希望任何下划线文本字段是否集中。

更新:更新了已接受的答案，以反映截至2020年4月Flutter SDK的变化。

294420 次浏览
小开
最佳答案

这样做:

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

或者如果你需要像icon这样的东西，用InputBorder.none设置边界

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

将焦点边框更改为none

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

下面是一个补充答案，显示了一些更完整的代码:

enter image description here

  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属性，但我无法让它们具有角半径，所以我使用了容器。
小开

新的Flutter SDK，因为在集成了web和桌面支持之后，你需要像这样单独指定:

TextFormField(
cursorColor: Colors.black,
keyboardType: inputType,
decoration: 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"),
)
小开

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

  TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(20),
),
),
);
小开 
decoration: InputDecoration(
border:OutLineInputBorder(
borderSide:BorderSide.none
bordeRadius: BordeRadius.circular(20.0)
)
)
小开 
            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),
),
),
),
小开

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

小开

要使一个无边界的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),
),
),
< p >样本通常: 正常情况下看起来像这样 < / p >

当有输入错误: On error < / p >

当用户输入: while entered data < / p >

小开

删除下划线border: InputBorder.none,

提示使用hintText: 'Hint Text'

   TextFormField(
InputDecoration(
border: InputBorder.none,
hintText: 'Hint Text',
),
),
小开

要在Flutter中删除TextField下划线，您可以简单地使用InputBorder.none。

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

提交答案