聚焦 TextFormField 时如何隐藏错误出现答案

【问题标题】：How to hide error appearances when TextFormField is focused聚焦 TextFormField 时如何隐藏错误出现
【发布时间】：2020-04-20 07:46:49
【问题描述】：

我使用TextFormField 作为表单和自定义验证器方法来返回错误消息。当文本字段获得焦点时，我正在尝试隐藏 TextFormField 上的默认错误消息和错误边框。

TextFormField(
   focusNode: _focusNode,
   validator: widget.validator,
   errorBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.blue, width: 5.0),
        borderRadius: BorderRadius.circular(5),
   ),
   focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(
        color: const Color(0x1C707070),
        width: 0.5,
   ),
)

我的问题是，当文本字段获得焦点时，错误边框被覆盖。下划线变为红色。我知道这就是TextFormField 的工作方式。

但我想要实现的是在文本字段获得焦点时隐藏所有错误外观，包括错误消息。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我通过添加errorStyle 和focusedErrorBorder 实现了所需的用户界面。

errorBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 1.0),
),
errorStyle: _focusNode.hasFocus ? TextStyle(fontSize: 0, height: 0) : null,
focusedErrorBorder: UnderlineInputBorder(
      borderSide: BorderSide.none,
),

【讨论】：

【解决方案2】：

公认的解决方案并不涵盖所有情况。更好的方法如下：

将Form的autovalidateMode属性设置为AutovalidateMode.onUserInteraction
在类中添加 _skipValidation 布尔属性作为标志
在验证器方法中，如果此标志为真，则返回 null。
在 TextFormField 中添加 onChanged、onTap（可选）和 onSaved 函数。对于前两个，只需将 _skipValidation 设置为 true，另一方面，在 onSaved 中将 flag 设置为 false。
最后，在用户提交表单时调用currentState!.validate()之前，使用currentState!.save()来触发我们上面定义的onSaved方法。

【讨论】：