如何在Flutter中删除TextField底部的空格？

Question

我不知道为什么TextField的底部在文本和蓝线之间有空格。

这是我的代码：

Future<Null> _selectNoteType (BuildContext context) async {

  switch (await showDialog<Null>(

      context: context,
      builder: (BuildContext context) {

        return new SimpleDialog(

          title: const Text('Select Note Type'),
          children: <Widget>[

            Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8.0),
              child: new TextField(
                keyboardType: TextInputType.text,
                maxLines: 1,
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 20.0
                ),
              ),
            ),

            new SimpleDialogOption(
                onPressed: () {},
                child: const Text('Text')
              ),

            new SimpleDialogOption(
              onPressed: () {},
              child: const Text('Checklist')
            ),
          ],
        );
      }
  )) {}
}

Answer 1

您可以对InputDecoration的{​​{1}}属性使用折叠的decoration:。

TextField

但是您必须知道使用折叠的 Future<Null> _selectNoteType(BuildContext context) async { InputDecoration decoration = const InputDecoration.collapsed() ..applyDefaults(Theme.of(context).inputDecorationTheme); switch (await showDialog<Null>( context: context, builder: (BuildContext context) { return new SimpleDialog( title: const Text('Select Note Type'), children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 8.0, right: 8.0), child: new TextField( decoration: decoration, keyboardType: TextInputType.text, maxLines: 1, style: new TextStyle(color: Colors.black, fontSize: 20.0), ), ), new SimpleDialogOption( onPressed: () {}, child: const Text('Text')), new SimpleDialogOption( onPressed: () {}, child: const Text('Checklist')), ], ); })) { } } 的后果。从文档中：

InputDecoration

对于 /// Whether the decoration is the same size as the input field. /// /// A collapsed decoration cannot have [labelText], [errorText], an [icon]. /// /// To create a collapsed input decoration, use [InputDecoration..collapsed]. final bool isCollapsed; 构造函数：

InputDecoration.collapse()

Answer 2

在我的情况下，即使使用TextField，InputDecoration.collapsed()仍然不会折叠。

我的版本完全没有填充，并且尺寸最小：

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(0.0),
    isDense: true,
    border: InputBorder.none,
  ),
  minLines: 1,
  maxLines: 1,
);

实时预览： https://dartpad.dev/3f9149a1c8f5eec352c796e7585e233c