user-interface - 验证错误上的两个内联 TextFormField 错误空格

Question

我创建了一个表单，其中我有两个并排的 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],
      );

标签： user-interfaceflutterdart

Answer 1

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

...

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

...