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

polhcujo 于 2023-03-15 发布在 Flutter

关注(0)|答案(6)|浏览(181)

是否有办法减少TextFormField小部件中实际输入和错误文本之间的间距？目前，表单上显示的错误文本几乎使表单的大小增加了一倍，我希望无论是否显示错误文本，表单区域都保持相同的大小。从下面的图片中，您可以看到它做出了多大的更改，并且在输入和错误消息之间有相当大的空间，可以使用reducing。
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,
                ),
              ),

dart

来源：https://stackoverflow.com/questions/54068556/how-to-edit-spacing-between-flutters-textformfield-input-and-errortext

6条答案

按热度按时间

5ktev3wc1#

在TextFormField小部件中添加修饰。

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

赞(0）回复(0）举报 2023-03-15

vlju58qv2#

除非你打开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,
    )
)

赞(0）回复(0）举报 2023-03-15

ut6juiuv3#

errorText的垂直填充在input_decorator.dart中设置：

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

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

赞(0）回复(0）举报 2023-03-15

igetnqfo4#

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

maxLength对于每个文本字段，=〉当显示错误时，您将有您想要的空间，之后您可以透明颜色计数器，它工作，

赞(0）回复(0）举报 2023-03-15

qvk1mo1f5#

我尝试更改文本高度，但我注意到动画在跳跃。
我找到了另一个解决方案。问题位于 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团队经常重写组件，所以要小心！下一个版本可能会有变化。

赞(0）回复(0）举报 2023-03-15

a1o7rhls6#

错误样式：文本样式（字体大小：0，高度：-8），
在高度上加一个负号，这对我很有效

赞(0）回复(0）举报 2023-03-15

我来回答

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

6条答案

相关问题

热门标签

最新问答