Jetpack Compose DropdownMenu菜单项被挤压、图标消失如何解决？

问题现象 #

Jetpack Compose 实现下拉菜单时，菜单项由文本、中间占位Spacer、右侧图标组成，出现布局异常：

• 短文本菜单项的图标可完整展示
• 长文本菜单项的图标会被压缩，极端情况下宽度变为0完全消失
• 只有当存在其他宽度更大的菜单项时，所有项的图标才会正常显示

问题截图 #

复现代码 #

@Preview(showSystemUi = true)
@Composable
fun MyScreen() {
    Box(Modifier.fillMaxSize(), Alignment.Center) {

        Box() {
            var expanded by remember { mutableStateOf(false) }

            IconButton(onClick = { expanded = !expanded }) {
                Icon(imageVector = Icons.Default.MoreVert, contentDescription = null)
            }

            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                MyMenuItem("item 1")           // Icon visible
                MyMenuItem("item 2")           // Icon visible
                MyMenuItem("item 3 long text") // Icon width shrunk to 0
                MyMenuItem("item 4 long te")   // Icon visible but shrunk
            }

        }
    }
}

@Composable
fun MyMenuItem(text: String) {
    DropdownMenuItem(onClick = { }) {
        Text(text)
        Spacer(modifier = Modifier.weight(1f))
        Icon(imageVector = Icons.Default.Check, contentDescription = null)
    }
}

已验证尝试 #

1. 使用Row()、Surface()替换DropdownMenuItem()实现菜单项，问题仍然复现
2. 给MyMenuItem()设置固定宽度可以解决问题，但不符合自动适配内容宽度的需求

问题原因 #

DropdownMenu默认测量逻辑为先逐个测量子项宽度，取最大值作为菜单整体宽度。子项中使用weight(1f)的Spacer在无约束测量阶段宽度会被计算为0，此时长文本会占满整个测量宽度，右侧图标不会被纳入子项宽度计算范围，最终布局时图标就会被挤压消失。

解决方案 #

使用固有特性测量强制将图标宽度纳入子项宽度计算，无需硬编码固定宽度，完全适配内容：

@Composable
fun MyMenuItem(text: String) {
    // 给DropdownMenuItem添加width(IntrinsicSize.Max)修饰符
    DropdownMenuItem(
        onClick = { },
        modifier = Modifier.width(IntrinsicSize.Max)
    ) {
        Text(text)
        Spacer(modifier = Modifier.weight(1f))
        Icon(imageVector = Icons.Default.Check, contentDescription = null)
    }
}

width(IntrinsicSize.Max)会强制组件测量出内部所有元素完全展示所需的最大宽度，DropdownMenu测量子项宽度时就会预留出图标位置，不会出现被挤压的问题。

内容的提问来源于stack exchange，提问作者Shreyash.K