在文本输入上，使用Flutter的TextFormField实现水平滚动
在文本输入上，使用Flutter的TextFormField实现水平滚动
当我在输入文本字段时，如果我写的文本超过了输入框的宽度，剩下的文本就会无法显示。有没有办法在我输入文本时实现水平滚动呢？
下图描述了我想要的行为。
[](https://i.stack.imgur.com/ReAyK.gif)
编辑：我的代码
Container(
width: 270,
height: 42,
child: new TextFormField(
validator: (val) => val.isEmpty ? '请输入电子邮件' : null,
decoration: new InputDecoration(
icon: Icon(
Icons.email_outlined,
),
labelText: '电子邮件',
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
),
keyboardType: TextInputType.emailAddress,
onChanged: (val) {
setState(() => email = val);
},
),
),
当我输入超过TextFormField的宽度时，会发生以下情况：
[](https://i.stack.imgur.com/VZxhK.png)
问题的出现原因：TextFormField中的输入文本内容过长时，水平滚动条没有显示，导致部分文本被截断。
解决方法：有两种方法可以解决这个问题。
方法一：添加isDense属性到TextFormField中，并设置为true。这样做可以修复问题，但是仍然无法显示那些低于字体基线的字符（如逗号、分号等）。
方法二：使用contentPadding属性，因为isDense实际上是修改了contentPadding属性的值。根据源代码，isDense的实际代码如下所示。可以通过设置contentPadding属性的值来解决问题。
根据上述代码，最佳配置似乎是：
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: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(),
),
),
keyboardType: TextInputType.emailAddress,
onChanged: (val) {
setState(() => email = val);
},
),
)
上述代码可以解决该问题，但如果字体高度发生变化，可能会引起其他问题。