Jetpack Compose ExusedDropdownMenu 按下时不显示

Question

我正在开发 Jetpack Compose (1.3.0-beta03) 和 Material3 (1.0.0-beta03) 应用程序。

我想向用户展示一个具有不同语言的简单下拉菜单，并且以下代码与您在网上找到的代码没有太大不同：

@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(),
            modifier = Modifier.fillMaxWidth()
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            languages.forEach {
                DropdownMenuItem(
                    text = { Text(it) },
                    onClick = {
                        selectedOptionText = it
                        expanded = false
                    }
                )
            }
        }
    }
}

在模拟器上运行可以正确显示文本字段，但如果我单击它，则不会显示下拉列表。它还按预期设置了正确的选项（“ro”）。

不知道如何解决这个问题。

任何帮助是极大的赞赏。

Answer 1

使用 M2，您的代码可以正常运行。

使用 M3，您必须将menuAnchor修饰符传递给TextField（它是通过 引入的material3 1.0.0-beta03）：

ExposedDropdownMenuBox(
    modifier = Modifier.padding(16.dp),
    expanded = expanded,
    onExpandedChange = { expanded = !expanded },
) {
   TextField(
        //...
        modifier = Modifier.menuAnchor()
    )
    ExposedDropdownMenu(
        /* .. */
    ) { /*..  */ }
}