如何在颤动中删除TextField底部的空格？答案

【问题标题】：How to remove Space at the bottom of TextField in flutter?如何在颤动中删除TextField底部的空格？
【发布时间】：2019-03-05 18:46:51
【问题描述】：

我不明白为什么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')
            ),
          ],
        );
      }
  )) {}
}

【问题讨论】：

标签： android dart flutter

【解决方案1】：

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

我的版本根本没有任何填充，并且采用最小尺寸：

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

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

【讨论】：

非常适合我:)
如果你有一个后缀或前缀图标怎么办，在这种情况下这将不起作用
@maheshmnj 你是什么意思？只需添加到 Row 小部件。
我相信这是更合适的解决方案，应该是公认的答案！

【解决方案2】：

您可以将折叠的InputDecoration 用于TextField 的decoration: 属性。

  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() 构造函数：

  /// Defines an [InputDecorator] that is the same size as the input field.
  ///
  /// This type of input decoration does not include a border by default.
  ///
  /// Sets the [isCollapsed] property to true.
  const InputDecoration.collapsed({

【讨论】：

【解决方案3】：

isDense 可以解决问题。使用更少的垂直空间

TextField(
  decoration: InputDecoration(
    isDense: true,
  ),
);

【讨论】：