在 Flutter 中的 TextField 下显示错误

Posted 2023-02-23

【中文标题】在 Flutter 中的 TextField 下显示错误

【英文标题】：Showing an error under a TextField in Flutter

【发布时间】：2020-08-17 06:12:05

【问题描述】：

Material Design 允许文本字段通过输入框下方的红色小标签指示错误：https://material.io/components/text-fields（请参见下面的屏幕截图）。

有没有办法为 Flutter 中的 TextField 字段实现这一点？我预计这是 TextField 或 TextEditingController 的属性，但没有找到类似的东西。

【参考方案1】：

它存在于TextField的装饰属性中，你也可以使用它的样式属性来设置它的样式。

     TextField(
        decoration: InputDecoration(
          errorStyle: TextStyle(),
          errorText: 'Please enter something'
        ),
      ),

【讨论】：

谢谢！这正是我所需要的。

【参考方案2】：

您根据 TextFormField 提供的验证器函数返回的验证结果显示错误，您检查那里的某些条件并根据您想要显示的内容和时间返回错误消息或 null，或者如果您不这样做'不想显示任何东西。

child: new TextFormField(
  autocorrect: false,
  validator: (value) 
    if (value.isEmpty) 
      return 'Error Message';
    
    return null;
  ,
  onSaved: (val) => //do something...,
  decoration: new InputDecoration(labelText: "Label*"),
),