Flutter如何调整DropdownMenuItem宽度以适配文本内容？

你遇到的问题是DropdownButton的下拉菜单默认会继承按钮的宽度，即便菜单项文本很短也会被撑宽。以下是两种可行的解决办法：

方法一：限制按钮宽度，让下拉菜单跟随适配 #

给DropdownButton包裹SizedBox并设置合适宽度，下拉菜单会自动匹配按钮宽度，同时给菜单项文本添加左对齐，避免内容居中显得空旷：

SizedBox(
  width: 60, // 根据需求调整宽度
  child: DropdownButton<dynamic>(
    value: state.locale.languageCode,
    isExpanded: true, // 让按钮占满SizedBox宽度
    items: [
      DropdownMenuItem(
        value: 'EN',
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text('EN'),
        ),
      ),
      DropdownMenuItem(
        value: 'DE',
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text('DE'),
        ),
      ),
    ],
    onChanged: (newValue) {
      dropdownCallback(newValue, state);
    },
    underline: DropdownButtonHideUnderline(child: Container()),
  ),
)

方法二：让菜单项完全适配文本宽度 #

关闭DropdownButton的自动扩展属性，给每个DropdownMenuItem的child设置固定宽度（匹配文本实际宽度）：

DropdownButton<dynamic>(
  value: state.locale.languageCode,
  isExpanded: false, // 关闭按钮自动扩展
  items: [
    DropdownMenuItem(
      value: 'EN',
      child: SizedBox(
        width: 40, // 适配文本的窄宽度
        child: Text('EN'),
      ),
    ),
    DropdownMenuItem(
      value: 'DE',
      child: SizedBox(
        width: 40,
        child: Text('DE'),
      ),
    ),
  ],
  onChanged: (newValue) {
    dropdownCallback(newValue, state);
  },
  underline: DropdownButtonHideUnderline(child: Container()),
)

注意：如果DropdownButton所在父组件有强制扩展宽度的约束（比如Row中的Expanded），需要先解除该约束，否则设置的宽度会失效。

内容的提问来源于stack exchange，提问作者JAgüero