Flutter如何让DropdownButtonFormField的图标高度与组件高度适配

解决方案 #

你遇到的问题是两个核心原因导致的：

• DropdownButtonFormField默认有iconSize参数约束图标最大尺寸，默认值为24，你注释了该参数，外部Container设置的30高度被强制约束无法生效
• 你的代码存在语法错误：InputDecoration没有闭合大括号，导致isExpanded等本属于DropdownButtonFormField的参数被写到了装饰配置内，部分布局属性不生效

修改后的代码如下：

DropdownButtonFormField(
  iconSize: 30, // 解开注释，设置为你需要的图标高度，放开尺寸约束
  icon: Container(
    height:30,
    width:30,
    alignment: Alignment.center, // 增加对齐，避免图标偏移
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10.0),
        topLeft: Radius.circular(10.0)
      )
    ),
    child: Icon(
      Icons.keyboard_arrow_down,
      color: Colors.white,
      size: 20, // 可单独调整图标本身的大小适配容器
    ),
  ),
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(vertical: 12, right:8.0), // 调整上下内边距，适配组件整体高度
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 1,color: Colors.grey[100],style: BorderStyle.solid),
      gapPadding: 0.0,
      borderRadius: const BorderRadius.all(
        Radius.circular(10.0),
      ),
    ),
    filled: true,
    labelText: "numbers",
  ), // 补上InputDecoration的闭合大括号，修正语法错误
  isExpanded: true,
  onChanged: (String Value) {
    setState(() {
      dropdownValue = Value;
    });
  },
  items: numlist
      .map((cityTitle) => DropdownMenuItem(
  value: cityTitle, child: Text("$cityTitle")))
      .toList(),
)

如果需要进一步调整组件整体高度，可以直接修改contentPadding的vertical数值，数值越大组件整体高度越高，对应设置的30高度图标会自动适配组件高度。

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