Flutter 同Row内TextFormField显示错误信息时被折叠如何解决

你遇到的输入框折叠压缩问题，本质是Row下的两个TextFormField为自适应高度组件，错误提示出现时组件整体高度变化，Row的高度约束冲突导致的布局挤压，可按以下方案解决：

方案1：固定单个输入框高度（最常用，性能最优） #

给每个TextFormField外层包裹固定高度的SizedBox，高度值设置为可容纳输入框+最多3行错误文本的大小即可，示例代码：

Row(
  children: <Widget>[
    Expanded(
      flex: 2,
      // 新增SizedBox固定高度，数值可自行调整
      child: SizedBox(
        height: 80,
        child: TextFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          keyboardType: TextInputType.number,
          controller: controller.plz,
          validator: ValidationBuilder(
                  localeName: localeLanguage)
              .digits()
              .minLength(5)
              .required()
              .build(),
          decoration: inputdecoration(),
        ),
      )
    ),
    SizedBox(width: 10.0),
    Expanded(
      flex: 3,
      // 同样套SizedBox固定高度，和第一个输入框高度保持一致
      child: SizedBox(
        height: 80,
        child: TextFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          validator: ValidationBuilder(
                  localeName: localeLanguage)
              .required()
              .build(),
          controller: controller.place,
          decoration: inputdecoration(),
        ),
      )
    )
  ],
),

方案2：通过InputDecoration约束固定高度 #

直接在你现有的InputDecoration配置里新增constraints属性固定高度，不需要修改外层布局：

InputDecoration(
  errorMaxLines: 3,
  helperText: '',
  // 新增高度约束，数值可自行调整
  constraints: BoxConstraints(minHeight: 80, maxHeight: 80),
  contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
  fillColor: AsianmastaColors.white,
  filled: true,
  border: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey, width: 1.0)
  )
)

方案3：自适应等高布局（不需要固定高度） #

如果希望两个输入框高度始终保持一致，跟随最高的子组件高度自适应，给Row外层套IntrinsicHeight组件即可：

IntrinsicHeight(
  child: Row(
    children: <Widget>[
      // 保留你原来的两个Expanded输入框代码即可
    ],
  ),
)

注意：这个方案性能略低于固定高度方案，复杂长列表页面不推荐使用，简单表单页可正常使用。

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