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

这就是我想做的:

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

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

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

当前回答

删除下划线边框:InputBorder.none

对于提示，使用hintText: ' hintText '

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

2022-09-28 04:45:42

其他回答

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

2021-02-18 17:23:51

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

  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也有一个fill和fillColor属性，但是我不能让它们有一个角半径，所以我用一个容器代替。

2019-10-14 09:41:36

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

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

2022-11-21 05:16:07

将焦点边框更改为none

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

2019-07-13 14:11:59

删除下划线边框:InputBorder.none

对于提示，使用hintText: ' hintText '

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

2022-09-28 04:45:42

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

推荐文章

最新文章

标签