Jetpack Compose中ExposedDropdownMenu点击后不显示问题求助

问题根源 #

你使用的Jetpack Compose 1.3.0-beta03和Material3 1.0.0-beta03属于beta版本，其中ExposedDropdownMenuBox要求内部的TextField必须通过Modifier.menuAnchor()绑定菜单锚点，否则点击TextField无法触发菜单展开逻辑。你的代码中恰好缺少这个关键修饰符。

修改后的完整代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Settings() {
    val languages = listOf("it", "en", "de", "ro", "fr", "es")

    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf("ro") }

    ExposedDropdownMenuBox(
        modifier = Modifier.padding(16.dp),
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
    ) {
        TextField(
            readOnly = true,
            value = selectedOptionText,
            onValueChange = {},
            label = { Text(stringResource(R.string.default_reading_language)) },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            // 添加menuAnchor修饰符，关联菜单锚点
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor()
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            languages.forEach {
                DropdownMenuItem(
                    text = { Text(it) },
                    onClick = {
                        selectedOptionText = it
                        expanded = false
                    }
                )
            }
        }
    }
}

额外注意事项 #

• 保持Compose与Material3版本匹配，beta版本的API可能存在变动，menuAnchor()是该版本中实现下拉菜单交互的必要条件。
• 确保ExposedDropdownMenu是ExposedDropdownMenuBox的直接子组件，不要嵌套在其他布局容器内，避免事件传递被拦截。

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