如何编辑Flutter的TextFormField输入框和错误提示文本之间的间距

Question

有没有办法减少TextFormField小部件中实际输入和错误文本之间的间距？目前，表单上显示错误文本几乎会使表单的大小增加一倍，我希望保持表单区域的大小无论是否有错误文本。从下面的图片中，您可以看到它产生了多大的变化，并且输入和错误消息之间有相当多的空间可以缩小。 在错误之前的表单 在错误之后的表单 以下是其中一个表单字段的示例。

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,
                ),
              ),

- Jwildsmith

---

使用 errorStyle 属性来编辑错误字体大小。 - anmol.majhail

@anmol.majhail 对的，我已经尝试过那样做了，但我不想让字体变小，因为那会使阅读更加困难，我只想让它靠近实际输入。我希望有一种方法可以编辑errorText本身的padding或margin。 - Jwildsmith

Answer 1

给TextFormField小部件添加装饰。

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

- anirudh

---

如果错误信息超过1行，那么错误信息将无法正确显示。 - Karen

Answer 2

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

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

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

- Andrey Gordeev

Answer 3

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

查找_buildError，

使用Container包装Text：

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

- monmonja

Answer 4

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

maxLength 对于每个文本框， => 当显示错误时，您将拥有所需的空间， 之后，您可以使用透明颜色计数器， 它有效了，

- Trọng Khôi Huỳnh Lữ

Answer 5

我尝试改变文本高度，但是我注意到动画会跳跃。

我找到了另一个解决方案。问题位于material/input_decorator.dart文件中，在_RenderDecoration类中。它包含以下内容：

static const double subtextGap = 8.0;

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

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

class CustomInputDecoration extends InputDecoration 

然后我在组件中使用它：

TextFormField(
      decoration: CustomInputDecoration(...)

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

- Dmitry Mukhin

Answer 6

errorStyle: TextStyle(fontSize: 0, height: -8 ),

将高度值加上负号，这对我起作用了。

- Mubarak Lawal