Flutter：行中的两个 Textformfield 有问题

Question

这是问题图片

我在颤振设计中面临问题 当我在一个文本表单字段上设置错误时，我连续有两个文本表单字段，它会稍微向上移动或收缩以为错误文本腾出空间

在 android 原生中不存在这个问题

如果有人可以帮助我的话

我尝试了很多解决方案，例如设置容器高度 100 并在其中放置行并设置对齐中心，但没有找到解决方案

   final firstName = new TextFormField(
    decoration: InputDecoration(
   //          border: OutlineInputBorder(),
      labelText: _APP_FIRSTNAME_LBL,
      contentPadding:
          EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom: 8.0)),
  validator: validateName,
  onSaved: (String val) {
    _mFirstName = val;
  },
);

 final lastName = new TextFormField(
    decoration: InputDecoration(
 //            border: OutlineInputBorder(),
        labelText: _APP_LASTNAME_LBL,
        contentPadding:
            EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom: 
 8.0)),
    //obscureText: true,
    validator: validateName,
    onSaved: (String val) {
      _mLastName = val;
    });

  final rowFirstLastName = new Container(
    alignment: Alignment.center,
    height: 80,
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            child: firstName,
          ),
        ),
        SizedBox(width: 48.0),
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            child: lastName,
          ),
        ),
      ],
    ));

如果字段出现错误或未设置，两个文本表单字段应保持相同的对齐方式

Answer 1

尝试将空的 helperText 添加到您的

TextFormField

。它将在输入下方保留一个空间，并且当显示错误时，您的输入不会改变大小。

Answer 2

我迟到了，但我正在写这个解决方案，希望其他人能受益。

情况1：当有错误的文本字段向上排时。 在这种情况下我们可以设置crossAxisAlignment。

crossAxisAlignment: CrossAxisAlignment.start

情况 2：如果您想向用户显示整个验证消息，那么您可以在 TextFormField 中的装饰下提供 errorMaxLines。

TextFormField(
decoration: InputDecoration(
    errorMaxLines: 4),)

案例3：您应该像这样对齐两个文本字段（使用Expanded而不是Flexible，并删除mainAxisAlignment：MainAxisAlignment.spaceBetween，因为spaceBetween会将宽度分成3等份，并且SizedBox将与该行中的文本字段具有相同的宽度） .

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    new Expanded(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: firstName,
      ),
    ),
    SizedBox(width: 48.0),
    new Expanded(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: lastName,
      ),
    ),
  ],
)

Answer 3

使用 IntrinsicHeight 和 CrossAxisAlignment.stretch。

看这里：

return IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        flex: 2,
        child: TextFormField(...),
      ),
      const SizedBox(width: 12),
      Expanded(
        child: TextFormField(...),
      ),
    ],
  ),
);