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

这就是我想做的:

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

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

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

当前回答

这样做:

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

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

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

2018-03-01 15:38:22

其他回答

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

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

2020-04-26 15:01:55

这样做:

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

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

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

2018-03-01 15:38:22

            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

试试下面的代码:

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30.0)),
    hintText: "Search your trips",
    hintStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
    filled: true,
    fillColor: Colors.cyan[200],
    suffixIcon: IconButton(
      onPressed: () {},
      icon: const Icon(Icons.search, color: Colors.white),
    ),
  ),
),

2023-01-20 07:47:47

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

2019-11-02 06:53:02

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

推荐文章

最新文章

标签