Flutter TextFormField校验错误文本引发控件变形及布局异常求助

核心思路 #

将组件改为StatefulWidget，给内部TextFormField绑定独立的GlobalKey<FormFieldState>，通过该Key直接获取当前输入框的校验错误信息——既不需要全局状态管理（比如Provider）避免错误串用，又能精准控制错误文本的显示位置。

修改后的组件代码 #

class FormInputFieldWidget extends StatefulWidget {
  final String hintText;
  final double width;
  final String? Function(String?) validator;
  final bool obscureText;
  final String? Function(String?) onSave;
  final Widget? suffixIcon;
  final TextInputAction textInputAction;

  const FormInputFieldWidget({
    required this.width,
    required this.hintText,
    required this.validator,
    required this.onSave,
    required this.textInputAction,
    this.obscureText = false,
    this.suffixIcon,
    Key? key,
  }) : super(key: key);

  @override
  State<FormInputFieldWidget> createState() => _FormInputFieldWidgetState();
}

class _FormInputFieldWidgetState extends State<FormInputFieldWidget> {
  final _fieldKey = GlobalKey<FormFieldState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      margin: EdgeInsets.symmetric(vertical: SH.sh * 9 / 812),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            key: _fieldKey,
            obscureText: widget.obscureText,
            textInputAction: widget.textInputAction,
            decoration: InputDecoration(
              // 隐藏默认错误提示，改用自定义下方文本
              errorStyle: const TextStyle(height: 0),
              suffixIcon: widget.suffixIcon,
              hintText: widget.hintText,
              hintStyle: TextStyle(
                color: AppColor.TEXTFIELD_GRAY,
                fontSize: 12,
                fontStyle: FontStyle.italic,
              ),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: AppColor.LIGHT_ORANGE),
              ),
              errorMaxLines: 1,
            ),
            onSaved: widget.onSave,
            validator: widget.validator,
            scrollPadding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom + 10),
          ),
          // 仅当输入框存在错误时显示自定义提示
          if (_fieldKey.currentState?.hasError == true)
            Padding(
              padding: const EdgeInsets.only(top: 4.0),
              child: Text(
                _fieldKey.currentState?.errorText ?? '',
                style: const TextStyle(
                  color: Colors.red,
                  fontSize: 10,
                ),
                maxLines: 1,
              ),
            ),
        ],
      ),
    );
  }
}

调用示例修改 #

无需再传递errorText参数，也不用在校验逻辑中操作全局状态，保留原有校验逻辑即可：

FormInputFieldWidget(
  width: SH.w * 280 / 375,
  hintText: 'Password',
  obscureText: true,
  validator: (str) {
    if ((str?.length ?? 0) < 5) {
      return '密码长度不能少于5位';
    }
    return null;
  },
  onSave: (val) {
    _userModel.password = val!;
  },
  textInputAction: TextInputAction.done,
),

关键优化点 #

1. 移除固定高度限制：原代码给容器和输入框设置固定高度是布局变形的核心原因，移除后组件会根据内容自适应高度，避免输入框被挤压。
2. 独立的FormFieldKey：每个输入框的GlobalKey<FormFieldState>是实例专属的，确保错误信息仅属于当前输入框，不会与其他输入框串用。
3. 隐藏默认错误样式：通过errorStyle: const TextStyle(height: 0)隐藏TextFormField自带的错误提示，同时取消默认错误内边距，避免输入框变形。
4. 条件渲染错误文本：仅在输入框存在错误时才显示下方提示，节省布局空间。

额外扩展 #

如果需要实时校验（用户输入时就触发校验），可以给TextFormField添加以下参数：

autovalidateMode: AutovalidateMode.onUserInteraction,

这样用户输入过程中会实时触发校验并显示错误，无需等待Form.validate()调用。

内容的提问来源于stack exchange，提问作者Vedo