Flutter跨设备适配：实现Row中TextFormField与DropdownButtonFormField等高

问题描述 #

我尝试让TextFormField与DropdownButtonFormField保持等高，但设置仅在单一设备上生效，切换不同设备后高度会变化。试过用SizedBox、Container等组件调整，均无效果。相关代码片段如下：

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Age",
            ),
            SizedBox(
                height: DeviceSize.isTablet ? 12 : 6),
            TextFormField(
              controller: ageController,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "Age",
                isDense: true,
                errorText: ageErrorMessage,
              ),
            ),
          ],
        ),
      ),
      const SizedBox(width: 12),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Gender",
              style: textStyle,
            ),
            SizedBox(
                height: DeviceSize.isTablet ? 12 : 6),
            DropdownButtonHideUnderline(
              child: DropdownButtonFormField<String>(
                isExpanded: true,
                decoration: const InputDecoration(
                    border: const OutlineInputBorder(),
                    contentPadding: EdgeInsets.symmetric(
                        horizontal: 8.0, vertical: 14.5)),
                hint: Text(
                  'Gender',
                  style: textStyle,
                ),
                value: selectedGender,
                validator: validate,
                borderRadius: BorderRadius.circular(20),
                items: genders.map((String gender) {
                  return DropdownMenuItem<String>(
                    value: gender,
                    child: Text(
                      gender,
                      style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w400),
                    ),
                  );
                }).toList(),
                onChanged: (String? value) {},
              ),
            ),
          ],
        ),
      )
    ],
  ),
),

解决方案 #

两者高度不一致的核心原因是默认布局配置不统一，包括内边距、文本样式等。要实现全设备适配，需统一以下关键配置：

• 统一输入框装饰：给两个组件的InputDecoration设置完全一致的contentPadding和isDense属性
• 统一文本样式：确保输入框的提示文本、输入文本，以及下拉框的选项文本使用相同的字体大小、字重
• 消除冗余配置：移除不必要的嵌套常量或硬编码差异

修改后的完整代码 #

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Age",
            ),
            SizedBox(height: DeviceSize.isTablet ? 12 : 6),
            TextFormField(
              controller: ageController,
              // 统一文本样式
              style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "Age",
                // 统一提示文本样式
                hintStyle: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
                isDense: true,
                // 和DropdownButtonFormField一致的内边距
                contentPadding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 14.5),
                errorText: ageErrorMessage,
              ),
            ),
          ],
        ),
      ),
      const SizedBox(width: 12),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Gender",
              style: textStyle,
            ),
            SizedBox(height: DeviceSize.isTablet ? 12 : 6),
            DropdownButtonHideUnderline(
              child: DropdownButtonFormField<String>(
                isExpanded: true,
                // 统一输入框文本样式
                style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  // 统一isDense属性
                  isDense: true,
                  contentPadding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 14.5),
                ),
                hint: Text(
                  'Gender',
                  // 统一提示文本样式
                  style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
                ),
                value: selectedGender,
                validator: validate,
                borderRadius: BorderRadius.circular(20),
                items: genders.map((String gender) {
                  return DropdownMenuItem<String>(
                    value: gender,
                    child: Text(
                      gender,
                      style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
                    ),
                  );
                }).toList(),
                onChanged: (String? value) {},
              ),
            ),
          ],
        ),
      )
    ],
  ),
),

修改关键点说明 #

1. 给TextFormField补充了与DropdownButtonFormField完全一致的contentPadding，同时统一开启isDense: true，消除内边距差异
2. 统一了所有相关文本的字体大小和字重，避免因文本高度不同导致的输入框整体高度差异
3. 移除了DropdownButtonFormField装饰中冗余的嵌套const，保持代码简洁的同时避免潜在的布局冲突

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