Flutter中Row内TextFormField与DropdownButton高度不一致问题求助

问题描述 #

TextFormField组件与DropdownButton组件高度不一致，尝试用Container包裹TextFormField后程序崩溃。组件层级为：Textfield/Dropdownbutton -> Expanded -> Row -> Column，需要让所有组件的边框高度完全一致。

问题原因 #

1. DropdownButton与TextFormField的默认装饰样式、内边距不统一，导致高度差异
2. 原代码中InputDecorator的child使用了Expanded（Expanded仅能在Row/Column等Flex布局中使用），这是语法错误，可能是引发崩溃的原因之一
3. InputDecorator缺少边框配置，DropdownButton未设置占满父容器宽度的属性

修复后的代码示例 #

Row(
  children: [
    Expanded(
      flex: 4,
      child: TextFormField(
        decoration: InputDecoration(
          hintText: "Name",
          contentPadding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.015),
          border: OutlineInputBorder(),
          fillColor: contrastColor,
          hoverColor: contrastColor,
          focusColor: contrastColor,
          filled: true,
        ),
        maxLength: 20,
        onChanged: (value) {
          setState(() {});
        },
      ),
    ),
    SizedBox(width: MediaQuery.of(context).size.width * 0.001),
    Expanded(
      flex: 2,
      child: TextFormField(
        decoration: InputDecoration(
          hintText: "Preis",
          contentPadding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.015),
          border: OutlineInputBorder(),
          fillColor: contrastColor,
          hoverColor: contrastColor,
          focusColor: contrastColor,
          filled: true,
        ),
        maxLength: 5,
        onChanged: (value) {
          setState(() {});
        },
      ),
    ),
    SizedBox(width: MediaQuery.of(context).size.width * 0.001),
    Expanded(
      flex: 4,
      child: InputDecorator(
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.015),
          border: OutlineInputBorder(),
          fillColor: contrastColor,
          hoverColor: contrastColor,
          focusColor: contrastColor,
          filled: true,
        ),
        child: DropdownButton<String>(
          dropdownColor: contrastColor,
          style: TextStyle(color: mainColor),
          value: selectedValue, // 替换为你的选中值变量
          isExpanded: true, // 让下拉按钮占满父容器宽度
          underline: SizedBox.shrink(), // 隐藏默认下划线，避免与边框重复
          items: [
            // 替换为你的下拉选项数据
            DropdownMenuItem(value: "Option1", child: Text("选项1")),
            DropdownMenuItem(value: "Option2", child: Text("选项2")),
          ],
          onChanged: (String? value) {
            setState(() {
              selectedValue = value;
            });
          },
        ),
      ),
    ),
  ],
)

关键修复点 #

• 给InputDecorator添加与TextFormField完全一致的border和contentPadding，确保高度对齐
• 移除InputDecorator内部的Expanded，改为给DropdownButton设置isExpanded: true实现宽度适配
• 隐藏DropdownButton默认下划线，避免与InputDecorator的边框冲突
• 修复原代码中setState的语法错误，补充DropdownButton的value和items有效数据

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