Flutter TextField输入错误数据时高度缩小，如何保持高度一致？

问题根源在于你给TextFormField套了固定高度的SizedBox，当验证错误触发时，TextFormField会在自身下方渲染错误文本，固定高度的容器会挤压输入框区域，导致其高度缩小。结合Flutter 3.16.x对输入框布局的调整，可通过以下两种方案修复：

方案一：移除固定高度容器，通过输入框内边距控制高度 #

直接去掉包裹TextFormField的SizedBox，改用InputDecoration的contentPadding和isDense参数稳定输入框自身高度，让错误文本自然显示在输入框下方，同时保持输入框高度一致：

修改后的build方法代码：

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (title != null) title!,
      if (title != null) SizedBox(height: 2.w),
      TextFormField(
        style: style ?? TextStyle(fontSize: 12.sp),
        controller: controller,
        autocorrect: false,
        initialValue: initialValue,
        decoration: InputDecoration(
          prefix: prefix,
          suffix: suffix,
          prefixIcon: prefixIcon,
          suffixIconConstraints: suffixIconConstraints,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
          isDense: true,
          // 调整contentPadding确保输入框高度稳定
          contentPadding: EdgeInsets.symmetric(vertical: 3.w, horizontal: 3.8.w),
          suffixIcon: suffixIcon,
          hintText: hintText,
          labelStyle: TextStyle(fontSize: 10.sp),
          hintStyle: TextStyle(color: Colors.grey.shade400, fontSize: 10.sp),
          // 可选：统一错误文本样式，避免布局波动
          errorStyle: TextStyle(fontSize: 10.sp, height: 1.2),
        ),
        keyboardType: keyboardType,
        textInputAction: textInputAction,
        maxLines: 1,
        obscureText: obscureText,
        inputFormatters: inputFormatters,
        validator: validator,
        onChanged: onChanged,
      ),
    ],
  );
}

方案二：手动控制错误提示位置，保留输入框固定高度 #

如果你需要保持组件整体高度一致（包括错误提示区域），可以将错误提示移到TextFormField外部，手动处理错误状态，确保输入框始终被固定高度容器包裹：

1. 给GeneralTextField新增String? error参数：

final String? error;

const GeneralTextField({
  Key? key,
  this.title,
  // ... 其他原有参数
  this.error,
}) : super(key: key);

2. 修改build方法，在固定高度的TextFormField下方显示错误文本：

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (title != null) title!,
      if (title != null) SizedBox(height: 2.w),
      SizedBox(
        height: 10.w,
        child: TextFormField(
          style: style ?? TextStyle(fontSize: 12.sp),
          controller: controller,
          autocorrect: false,
          initialValue: initialValue,
          decoration: InputDecoration(
            prefix: prefix,
            suffix: suffix,
            prefixIcon: prefixIcon,
            suffixIconConstraints: suffixIconConstraints,
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            isDense: true,
            contentPadding: EdgeInsets.all(3.8.w),
            suffixIcon: suffixIcon,
            hintText: hintText,
            labelStyle: TextStyle(fontSize: 10.sp),
            hintStyle: TextStyle(color: Colors.grey.shade400, fontSize: 10.sp),
            // 关闭TextFormField自带的错误提示
            errorText: null,
          ),
          keyboardType: keyboardType,
          textInputAction: textInputAction,
          maxLines: 1,
          obscureText: obscureText,
          inputFormatters: inputFormatters,
          validator: validator,
          onChanged: onChanged,
        ),
      ),
      // 手动显示错误文本，预留固定高度空间
      SizedBox(height: error != null ? 12.sp : 0),
      if (error != null)
        Text(
          error!,
          style: TextStyle(color: Colors.red, fontSize: 10.sp),
        ),
    ],
  );
}

使用时在Form验证后将错误信息传入error参数即可。

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