Flutter：如何让TextFormField与DropdownButtonFormField始终对齐？

问题核心是：验证触发后TextFormField会显示错误提示文本，导致整体高度增加，而DropdownButtonFormField无错误提示时高度不变，CrossAxisAlignment.end会因高度差异失效；使用基线对齐时，两个字段的默认文本样式差异会导致细微错位。

以下是几种可靠的解决方法：

方法一：统一错误提示区域高度 #

给DropdownButtonFormField添加空的validator，确保即使无错误也会渲染错误提示容器（高度与TextFormField一致），同时统一两个字段的错误样式：

Form(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
              child: TextFormField(
              autofillHints: const [AutofillHints.telephoneNumber],
              decoration: InputDecoration(
                labelText: 'Phone',
                floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                // 统一错误文本样式
                errorStyle: const TextStyle(height: 1),
              ),
              initialValue: model.phone,
              keyboardType: TextInputType.phone,
              onSaved: (value) {
                model.phone = value;
              },
              validator: (value) {
                return (value == null || value.isEmpty) ? "Required field" : null;
              },
            )
          ),
          const SizedBox(width: 10),
          Expanded(
            child: DropdownButtonFormField<int>(
                decoration: InputDecoration(
                  labelText: 'Participants',
                  floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                  // 统一错误文本样式
                  errorStyle: const TextStyle(height: 1),
                ),
                items: model.participantsList(),
                onChanged: (value) {
                    model.participants = value;
                },
                // 添加空validator，确保错误容器存在
                validator: (_) => null,
              )
          ),
        ],
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Notes',
          floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
        ),
        onSaved: (value) {
          model.notes = value;
        },
        textCapitalization: TextCapitalization.sentences,
      ),
    ],
  ),
);

方法二：统一输入区域样式与基线对齐 #

调整两个字段的文本样式、内容边距，确保输入文本的基线完全一致，配合CrossAxisAlignment.baseline使用：

Form(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(
              child: TextFormField(
              autofillHints: const [AutofillHints.telephoneNumber],
              decoration: InputDecoration(
                labelText: 'Phone',
                floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                // 统一内容边距
                contentPadding: const EdgeInsets.symmetric(vertical: 16),
              ),
              // 统一输入文本样式
              style: const TextStyle(fontSize: 16, height: 1),
              initialValue: model.phone,
              keyboardType: TextInputType.phone,
              onSaved: (value) {
                model.phone = value;
              },
              validator: (value) {
                return (value == null || value.isEmpty) ? "Required field" : null;
              },
            )
          ),
          const SizedBox(width: 10),
          Expanded(
            child: DropdownButtonFormField<int>(
                decoration: InputDecoration(
                  labelText: 'Participants',
                  floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                  // 统一内容边距
                  contentPadding: const EdgeInsets.symmetric(vertical: 16),
                ),
                // 统一选中项文本样式
                style: const TextStyle(fontSize: 16, height: 1),
                items: model.participantsList(),
                onChanged: (value) {
                    model.participants = value;
                },
              )
          ),
        ],
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Notes',
          floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
        ),
        onSaved: (value) {
          model.notes = value;
        },
        textCapitalization: TextCapitalization.sentences,
      ),
    ],
  ),
);

方法三：用IntrinsicHeight强制行内组件高度一致 #

通过IntrinsicHeight让Row内的两个字段高度完全匹配，再结合CrossAxisAlignment.stretch确保底部对齐：

Form(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
                child: TextFormField(
                autofillHints: const [AutofillHints.telephoneNumber],
                decoration: InputDecoration(
                  labelText: 'Phone',
                  floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                ),
                initialValue: model.phone,
                keyboardType: TextInputType.phone,
                onSaved: (value) {
                  model.phone = value;
                },
                validator: (value) {
                  return (value == null || value.isEmpty) ? "Required field" : null;
                },
              )
            ),
            const SizedBox(width: 10),
            Expanded(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: DropdownButtonFormField<int>(
                    decoration: InputDecoration(
                      labelText: 'Participants',
                      floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
                    ),
                    items: model.participantsList(),
                    onChanged: (value) {
                        model.participants = value;
                    },
                  ),
              ),
            ),
          ],
        ),
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Notes',
          floatingLabelStyle: const TextStyle(color: Color(0x99000000)),
        ),
        onSaved: (value) {
          model.notes = value;
        },
        textCapitalization: TextCapitalization.sentences,
      ),
    ],
  ),
);

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