如何在保持DropdownButton宽度不变时缩小DropdownMenu宽度？

不用isExpanded: true，改用SizedBox固定按钮宽度就行——因为isExpanded会强制下拉菜单和按钮同宽，这就是你遇到问题的根源。

修改后的代码 #

return SizedBox(
  width: 300.0, // 这里设置你想要的按钮宽度
  child: DropdownButton(
    // 删掉isExpanded: true这一行
    value: name,
    items: listOfDropdownMenuItems,
    onChanged: onChanged,
    style: Theme.of(context).textTheme.title,
  ),
);

这么改之后，按钮会保持你设置的300宽度，而下拉菜单会自动适配mon、tue这类短内容的宽度，不会再跟按钮一样宽。

额外优化（可选） #

如果选中的文本太长，在按钮里显示不下，可以加个selectedItemBuilder来处理文本截断：

selectedItemBuilder: (BuildContext context) {
  return listOfDropdownMenuItems.map((item) {
    return Container(
      width: 280.0, // 比按钮宽度稍窄，留出发箭头的空间
      child: Text(
        item.value!,
        overflow: TextOverflow.ellipsis, // 文本过长时显示省略号
      ),
    );
  }).toList();
},

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