如何编辑 Flutter 的 TextFormField 输入和 errorText 之间的间距答案

【问题标题】：How to edit spacing between Flutter's TextFormField input and errorText如何编辑 Flutter 的 TextFormField 输入和 errorText 之间的间距
【发布时间】：2019-01-07 04:28:31
【问题描述】：

有没有办法减少 TextFormField 小部件中实际输入和错误文本之间的间距？就目前而言，表单上显示的错误文本几乎是表单大小的两倍，我希望在有或没有错误文本的情况下保持表单区域的大小相同。从下面的图片中你可以看到它做了多少改变，并且在输入和可以使用减少的错误消息之间有很大的空间。

Form before errors Form after errors

这是其中一个表单域的示例

Padding(
                padding: EdgeInsets.only(
                    top: 5.0, bottom: 5.0, left: 25.0, right: 25.0),
                child: TextFormField(
                  focusNode: myFocusNodeName,
                  controller: signupNameController,
                  keyboardType: TextInputType.text,
                  textCapitalization: TextCapitalization.words,
                  style: TextStyle(
                      fontFamily: "WorkSansSemiBold",
                      fontSize: 16.0,
                      color: Colors.black),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    icon: Icon(
                      FontAwesomeIcons.user,
                      color: Colors.black,
                    ),
                    errorText: signupLastNameErrorText,
                    hintText: "Last Name",
                    hintStyle: TextStyle(
                        fontFamily: "WorkSansSemiBold", fontSize: 16.0),
                  ),
                  validator: (value) =>
                      value.isEmpty ? 'Last Name can\'t be empty' : null,
                  onSaved: (value) => _lastname = value,
                ),
              ),

【问题讨论】：

使用errorStyle属性编辑错误字体大小。
@anmol.majhail 是的，我已经尝试过这样做，但我不希望字体更小，因为这样会使其更难阅读，更接近实际输入。我希望有一种方法可以编辑 errorText 本身的填充或边距

标签： dart flutter

【解决方案1】：

在 TextFormField 小部件中添加装饰。

InputDecoration(
      contentPadding: EdgeInsets.only(left: 11, right: 3, top: 14, bottom: 14),
      errorStyle: TextStyle(fontSize: 9, height: 0.3),
)

【讨论】：

如果错误超过 1 行，错误将无法正确显示

【解决方案2】：

除非你打开InputDecoration的源代码（在你的sdk文件夹flutter/packages/flutter/lib/src/material/input_decorator.dart上），否则似乎没有办法做到这一点

寻找 _buildError
用容器包装文本

Container(
    padding: EdgeInsets.only(bottom: 4),
    child: Text(
        widget.errorText,
        style: widget.errorStyle,
        textAlign: widget.textAlign,
        overflow: TextOverflow.ellipsis,
        maxLines: widget.errorMaxLines,
    )
)

【讨论】：

【解决方案3】：

我的解决方案，您可以使用：

最大长度 对于每个 TextField， => 当显示错误时，你会有你想要的空间，之后，你可以透明的颜色计数器，成功了，

【讨论】：

【解决方案4】：

errorText 的垂直内边距在input_decorator.dart 中设置：

final double helperErrorHeight =
        !helperErrorExists ? 0 : helperError.size.height + subtextGap;

subtextGap 是一个静态常量，等于8.0。不幸的是，没有简单的方法可以覆盖该值。

【讨论】：

【解决方案5】：

我试图改变文字高度，但我注意到动画在跳跃。

我找到了另一个解决方案。 material/input_decorator.dart 文件中的问题。在 _RenderDecoration 类中。它包含：

static const double subtextGap = 8.0;

我复制了所有文件，删除了 InputDecorationTheme 并将值更改为 0.0。

它还包含 InputDecoration。我扩展了 InputDecoration 并删除了覆盖方法：

class CustomInputDecoration extends InputDecoration

然后我在组件中使用它：

TextFormField(
      decoration: CustomInputDecoration(...)

我的颤振版本：2.2.1。我注意到 Flutter 团队经常重写组件，所以要小心！下一个版本可能会有变化。

【讨论】：