Jetpack Compose中DropdownMenu宽度匹配触发Button的问题

要让DropdownMenuItem的宽度和触发它的OutlinedButton完全对齐，核心是获取按钮的宽度并传递给DropdownMenu，同时确保菜单项占满整个宽度。具体修改如下：

1. 添加状态保存按钮宽度：用remember创建状态变量存储按钮的宽度
2. 监听按钮尺寸变化：给按钮添加onSizeChanged修饰符，实时更新宽度值
3. 设置DropdownMenu宽度：将获取到的按钮宽度赋值给DropdownMenu的宽度修饰符
4. 让菜单项占满宽度：给DropdownMenuItem添加fillMaxWidth，并调整文本对齐方式（可选）

修改后的完整代码：

Row(
    modifier = modifier
        .padding(horizontal = 20.dp)
        .padding(bottom = 28.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "Max no. of turns:  ",
        fontSize = 18.sp
    )

    Column {
        // 保存按钮宽度的状态
        var buttonWidth by remember { mutableStateOf(0.dp) }

        OutlinedButton(
            onClick = { expanded = !expanded },
            shape = RectangleShape,
            // 监听按钮尺寸变化，更新宽度
            modifier = Modifier.onSizeChanged { buttonWidth = it.width.toDp() }
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(text = gameUiState.maxNoOfTurns.toString())

                Icon(
                    imageVector = Icons.Filled.ArrowDropDown,
                    contentDescription = "Dropdown Menu Icon"
                )
            }
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            // 设置DropdownMenu宽度与按钮一致
            modifier = Modifier.width(buttonWidth)
        ) {
            for (i in 1..10) {
                DropdownMenuItem(
                    text = { 
                        // 让文本左对齐，和按钮内文本风格统一
                        Text(text = i.toString(), modifier = Modifier.fillMaxWidth()) 
                    },
                    onClick = {
                        onSelectionChange(i)
                        expanded = false
                    },
                    // 让菜单项占满DropdownMenu宽度
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

关键说明： #

• onSizeChanged会在按钮尺寸变化时（比如屏幕旋转、布局调整）自动更新宽度，保证适配各种场景
• 给DropdownMenuItem设置fillMaxWidth后，菜单项会完全填充DropdownMenu的宽度，和按钮完美对齐
• 调整文本对齐方式可让下拉菜单的文本和按钮内的文本视觉风格保持一致

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