Compose中ExposedDropdownMenu与系统键盘重叠问题求助

我尝试在Jetpack Compose中实现一个带可展开建议列表的文本输入组件，使用ExposedDropdownMenuBox作为容器，内部包含TextField和ExposedDropdownMenu，实现代码如下：

@Composable
fun ExpirationTimeMenuBox() {
    val suggestions = listOf("Dzień", "Tydzień", "Miesiąc", "Rok", "Dzień")
    var isExpanded by remember { mutableStateOf(false) }
    var textFieldValue by remember {
        mutableStateOf(TextFieldValue(""))
    }

    ExposedDropdownMenuBox(
        expanded = isExpanded,
        onExpandedChange = { isExpanded = !isExpanded },
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 4.dp)
    ) {
        TextField(
            value = textFieldValue,
            onValueChange = { textFieldValue = it },
            label = { Text(text = "Termin") },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Done,
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor()
        )
        val filteredSuggestions = if (textFieldValue.text.isEmpty()) {
            emptyList()
        } else {
            suggestions.map { suggestion ->
                "${textFieldValue.text} $suggestion"
            }
        }
        if (filteredSuggestions.isNotEmpty()) {
            ExposedDropdownMenu(
                expanded = isExpanded,
                onDismissRequest = { isExpanded = false },
                modifier = Modifier.exposedDropdownSize(),
            ) {
                filteredSuggestions.forEach { suggestion ->
                    DropdownMenuItem(
                        text = { Text(text = suggestion) },
                        onClick = {
                            textFieldValue = TextFieldValue(suggestion, selection = TextRange(suggestion.length))
                            isExpanded = false
                        }
                    )
                }
            }
        }
    }
}

当前问题是ExposedDropdownMenu展开时会与系统键盘重叠，期望在空间不足时，下拉菜单能自动显示在TextField上方。

要实现菜单自动根据空间切换上下位置，只需对ExposedDropdownMenu做两处关键修改：

1. 移除原有的modifier = Modifier.exposedDropdownSize()，改用ExposedDropdownMenuBox提供的DropdownMenuScope中的exposedDropdownSize()扩展函数。
2. 给ExposedDropdownMenu添加placement参数，设置为DropdownMenuPlacement.Auto，让Compose自动检测可用空间，优先在下方展示，空间不足时自动切换到上方。

修改后的完整代码如下：

@Composable
fun ExpirationTimeMenuBox() {
    val suggestions = listOf("Dzień", "Tydzień", "Miesiąc", "Rok", "Dzień")
    var isExpanded by remember { mutableStateOf(false) }
    var textFieldValue by remember {
        mutableStateOf(TextFieldValue(""))
    }

    ExposedDropdownMenuBox(
        expanded = isExpanded,
        onExpandedChange = { isExpanded = !isExpanded },
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 4.dp)
    ) {
        TextField(
            value = textFieldValue,
            onValueChange = { textFieldValue = it },
            label = { Text(text = "Termin") },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Done,
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor()
        )
        val filteredSuggestions = if (textFieldValue.text.isEmpty()) {
            emptyList()
        } else {
            suggestions.map { suggestion ->
                "${textFieldValue.text} $suggestion"
            }
        }
        if (filteredSuggestions.isNotEmpty()) {
            ExposedDropdownMenu(
                expanded = isExpanded,
                onDismissRequest = { isExpanded = false },
                // 关键修改：使用作用域内的exposedDropdownSize，添加Auto placement
                modifier = exposedDropdownSize(),
                placement = DropdownMenuPlacement.Auto
            ) {
                filteredSuggestions.forEach { suggestion ->
                    DropdownMenuItem(
                        text = { Text(text = suggestion) },
                        onClick = {
                            textFieldValue = TextFieldValue(suggestion, selection = TextRange(suggestion.length))
                            isExpanded = false
                        }
                    )
                }
            }
        }
    }
}

关键说明 #

• DropdownMenuPlacement.Auto：Compose会自动计算TextField下方的可用空间，如果空间不足以展示完整菜单，就会自动将菜单放在TextField的上方，避免与键盘或屏幕底部重叠。
• 必须使用ExposedDropdownMenuBox作用域内的exposedDropdownSize()，而不是直接在Modifier上调用，这样才能让菜单正确继承锚点的尺寸和布局上下文，配合Auto placement完成位置计算。

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