首页 > 解决方案 > 聚焦 TextFormField 时如何隐藏错误出现

问题描述

我正在使用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工作的。

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

标签: flutterflutter-layout

解决方案


我通过添加errorStyle&实现了所需的 UI 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,
),

推荐阅读