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

这就是我想做的:

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

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

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

当前回答

要使一个无边界的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),
                ),
           ),

样品通常:

当有输入错误时:

当用户输入:

2022-04-29 13:30:51

其他回答

默认的

 Container(
      padding: const EdgeInsets.all(20),
      child: const TextField(
        decoration: InputDecoration(
            border: UnderlineInputBorder(), hintText: "Search Your tips"),
      ),
    ),

外框

 Container(
      padding: const EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(40),
          ),
          hintText: "Search Your tips",
        ),
      ),
    ),

没有边界

 Container(
      padding: const EdgeInsets.all(20),
      child: const TextField(
        decoration: InputDecoration(
            border: InputBorder.none, hintText: "Search Your tips"),
      ),
    ),

2022-12-28 18:23:27

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

2020-07-05 15:04:01

这样做:

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

或者如果你需要其他东西，如icon，设置边界InputBorder.none

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

2018-03-01 15:38:22

将焦点边框更改为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但没有下划线?

推荐文章

最新文章

标签