TextFormField 中的水平滚动在文本输入上抖动

Question

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

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

编辑：我的代码

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 宽度时发生的情况

Answer 1

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

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

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

2. 使用 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);
          },
        ),
      ),

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