Jetpack Compose中ExposedDropdownMenu无法与OutlinedTextField保持同宽的问题求助

我完全懂你遇到的这个坑——同样的尺寸获取逻辑在DropdownMenu里好好的，换到ExposedDropdownMenu就失效了，确实挺让人挠头的。问题的核心在于**ExposedDropdownMenu是ExposedDropdownMenuBox的专属子组件，它的布局完全受父容器ExposedDropdownMenuBox的约束**，你手动设置的width会被ExposedDropdownMenuBox内部的布局逻辑覆盖掉；而DropdownMenu是独立组件，没有这种父容器的强约束，所以你的方法能正常生效。

具体原因拆解 #

ExposedDropdownMenuBox内部有一套自己的布局计算逻辑，会为下拉菜单划定一个默认的显示范围。当你给ExposedDropdownMenu手动设置固定宽度时，父容器的布局约束会优先生效，导致你的宽度设置被直接忽略，自然就无法和TextField对齐了。

修复方案 #

其实我们不需要手动获取TextField的尺寸，只需要让ExposedDropdownMenu继承父容器ExposedDropdownMenuBox的宽度，同时让ExposedDropdownMenuBox的宽度和OutlinedTextField保持一致即可。修改后的代码如下：

var expanded by remember { mutableStateOf(false) }
val genderList by remember { mutableStateOf(listOf("Male", "Female")) }
val icon = if (expanded) Icons.Filled.ArrowDropUp else Icons.Filled.ArrowDropDown

ExposedDropdownMenuBox(
    // 让ExposedDropdownMenuBox填充父容器宽度，和TextField保持一致
    modifier = modifier
        .fillMaxWidth()
        .clickable(onClick = { expanded = true }),
    expanded = expanded,
    onExpandedChange = { expanded = !expanded }
) {
    OutlinedTextField(
        value = "",
        onValueChange = {},
        modifier = Modifier.fillMaxWidth(), // 保持填充父容器宽度
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = BorderColor,
            unfocusedIndicatorColor = Color.Transparent,
            focusedIndicatorColor = BrandColor,
            focusedLabelColor = BrandColor,
        ),
        leadingIcon = {
            Image(
                painter = painterResource(id = R.drawable.ic_complete_registration_sex),
                contentDescription = null
            )
        },
        trailingIcon = { Icon(icon, null) },
        shape = RoundedCornerShape(Dimen.Dimen14),
        label = {
            Text(
                "Choose Gender",
                style = PoppinsNormalStyle14
            )
        },
        readOnly = true
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier.background(Color.White),
        // 设置contentWidth为Fill，让下拉菜单自动填充父容器宽度
        contentWidth = ContentWidth.Fill
    ) {
        genderList.forEach {
            DropdownMenuItem(
                onClick = { expanded = false },
            ) {
                Text(it, style = PoppinsNormalStyle12Gray2)
            }
        }
    }
}

关键修改点 #

1. 给ExposedDropdownMenuBox添加fillMaxWidth()，确保它的宽度和OutlinedTextField完全一致；
2. 移除手动获取TextField尺寸的冗余代码，改用ExposedDropdownMenu的contentWidth = ContentWidth.Fill参数，让下拉菜单自动继承父容器的宽度。

这样修改后，下拉菜单就能和TextField完美对齐宽度了，代码也更简洁易维护~

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