flutter 验证错误时出现两个内联TextFormField错误空格

iqih9akk  于 2023-05-29  发布在  Flutter
关注(0)|答案(2)|浏览(174)

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

uttx8gqw1#

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

...

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

...

gorkyyrv

gorkyyrv2#

请在Row Wiget中添加以下属性

crossAxisAlignment: CrossAxisAlignment.start,

相关问题