TextFormField 中的水平滚动在文本输入时颤动答案

【问题标题】：Horizontal scroll in TextFormField flutter on text inputTextFormField 中的水平滚动在文本输入时颤动
【发布时间】：2021-08-17 05:45:57
【问题描述】：

当我写的文本超过此输入的宽度时，我有一个电子邮件输入文本字段，其余文本不可见。有没有办法在我输入到这个文本表单字段时进行水平滚动？

下图描述了我想要的行为。

编辑：我的代码

Container(
  width: 270,
  height: 42,
  child: new TextFormField(
    validator: (val) => val.isEmpty ? 'Enter an email' : null,
    decoration: new InputDecoration(
      icon: Icon(
        Icons.email_outlined,
      ),
      labelText: 'Email',
      border: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide: new BorderSide(),
      ),
    ),
    keyboardType: TextInputType.emailAddress,
    onChanged: (val) {
      setState(() => email = val);
    },
  ),
),

当我输入超出 TextFormField 的宽度时会发生这种情况

【问题讨论】：

你得到什么类型的输出？因为你想要实现的是TextFormField()的默认行为，如果你想看到隐藏的内容你可以滚动到右边看到你之前输入的内容。
所以当我开始输入超出宽度时，文本不再可见。
你能以某种方式展示它吗？
当然我会添加一些图片
从您的Container() 中删除您的身高属性，这会导致问题

标签： flutter dart

【解决方案1】：

有两种方法可以解决这个问题：

您可以将 isDense 属性添加到 TextFormField，在这种情况下，您的代码将如下所示：

Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: new InputDecoration(
            isDense: true,
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

这在一定程度上解决了这个问题，但是如果字体延伸得更低（如逗号、分号等）仍然会被剪掉。下一个方法解决了这个问题：

使用 contentPadding 属性，因为如果您检查源代码，isDense 所做的只是修改 contentPadding 属性的值。这是 isDense 背后的一些实际代码：

if (decoration!.filled == true) { // filled == null same as filled == false
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0)
          : const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 12.0));
      } else {
        // Not left or right padding for underline borders that aren't filled
        // is a small concession to backwards compatibility. This eliminates
        // the most noticeable layout change introduced by #13734.
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0)
          : const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 12.0));
      }

如您所见，Flutter 在幕后所做的一切都是根据您传递的参数为您的参数分配硬编码值。在您的情况下，最好的配置似乎是：

Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0),
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

以上代码解决了您的问题，但如果您的字体高度发生变化，可能会产生更多问题。

【讨论】：