验证错误上的两个内联 TextFormField 错误空格答案

【问题标题】：Two inline TextFormField wrong spaces on Validation Error验证错误上的两个内联 TextFormField 错误空格
【发布时间】：2020-03-02 20:08:46
【问题描述】：

我创建了一个表单，其中有两个并排的 TextFormField，问题是当显示验证错误消息时，其中一个 TextFormField 上升，而让另一个下降一点。我该如何纠正这个小小的设计错误

这是我得到的截图

这是我设计的方式

Row(
  children: <Widget>[
    Expanded(
      child: GestureDetector(
        onTap: () => utils.selectDate(context, _dateCtrl),
        child: AbsorbPointer(
          child: TextFormField(
            readOnly: true,
            controller: _dateCtrl,
            validator: (value) => Validate.getMsg('date', value),
            decoration: buildInputDecoration(
              false,
              'Date',
              iconData: Icons.calendar_today,
            ),
          ),
        ),
      ),
    ),
    SizedBox(width: 5),
    Expanded(
      child: GestureDetector(
        onTap: () => utils.selectTime(context, _timeCtrl),
        child: AbsorbPointer(
          child: TextFormField(
            readOnly: true,
            controller: _timeCtrl,
            validator: (value) => Validate.getDateTimeMsg(
              'time',
              value,
            ),
            decoration: buildInputDecoration(
              false,
              'Time',
              iconData: Icons.access_time,
            ),
          ),
        ),
      ),
    ),
  ],
),

这是 buildInputDecoration 方法的代码

InputDecoration buildInputDecoration(bool isTextArea, String hintText,
          {IconData iconData}) =>
      InputDecoration(
        contentPadding: isTextArea ? EdgeInsets.all(15.0) : null,
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent),
        ),
        errorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
        hintText: hintText,
        prefixIcon: isTextArea ? null : Icon(iconData),
        filled: true,
        fillColor: Colors.grey[100],
      );

【问题讨论】：

如果您不分享您的 buildInputDecoration 方法，我们无法对这个问题进行排序。在没有它的情况下构建代码会导致正常的并排 TextFormFields。因此，问题要么在于该方法的装饰，要么在于您尚未共享的代码中的其他地方。
好的@JoãoSoares 让我用 buildInputDecoration 编辑我的帖子
我刚刚意识到，当 time 字段的 errorText 显示时，会在其下方创建一个空格，导致日期字段保持向下，因为它没有空间。当errorText 同时显示时间和日期时，这两个内联文本表单域工作得很好。当一个有errorText 时，我基本上需要一个解决方案来在两个字段中创建向下空间

标签： user-interface flutter dart

【解决方案1】：

您需要做的就是将CrossAxisAlignment 添加到您的行的顶部：

...

child: Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[

...

【讨论】：

很高兴我能帮上忙。祝你的应用好运！