如何让ExposedDropdownMenu宽度匹配其最宽MenuItem

默认情况下，ExposedDropdownMenu会继承父容器ExposedDropdownMenuBox的宽度（也就是和上方的OutlinedTextField等宽），要让它自动适配菜单中最宽的选项，只需要给ExposedDropdownMenu添加一个关键的Modifier即可。

修改后的完整代码 #

ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    }
) {
    OutlinedTextField(
        readOnly = true,
        value = selected,
        onValueChange = { },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = expanded
            )
        }
    )

    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        // 核心：让下拉菜单根据内容最小宽度自适应
        modifier = Modifier.width(IntrinsicSize.Min)
    ) {
        options.forEach { selection ->
            DropdownMenuItem(
                onClick = {
                    selected = selection
                    expanded = false
                }
            ) {
                // 确保文本不会被截断，可根据需求调整maxLines
                Text(
                    text = selection,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
    }
}

原理说明 #

• Modifier.width(IntrinsicSize.Min)会让ExposedDropdownMenu计算所有子项（也就是DropdownMenuItem）的最大宽度，然后将自身宽度设置为这个值，从而实现适配最宽菜单项的效果。
• 之前调整其他层级的Modifier无效，是因为默认ExposedDropdownMenu的宽度被强制绑定到ExposedDropdownMenuBox的宽度，而ExposedDropdownMenuBox的宽度由上方的OutlinedTextField撑满，通过IntrinsicSize可以打破这个绑定，让下拉菜单基于自身内容计算宽度。

如果你的菜单项文本特别长，还可以给Text添加Modifier.wrapContentWidth()来允许文本换行，或者保持maxLines=1并添加省略号来避免布局错乱。

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