Android Compose中DropdownMenuItem点击无响应、菜单无法收起问题求解

根因定位 #

代码中将DropdownMenu直接作为带点击事件的Row组件的子元素，违反了Jetpack Compose下拉菜单的实现规范。DropdownMenu底层基于独立弹窗实现，嵌套在触发视图内部会导致点击事件分发冲突，进而出现菜单项点击无响应、界面后续无交互的异常。

修复代码 #

将DropdownMenu移出Row，和触发用的Row平级放置在外层Box中即可：

val countriesList = mutableListOf<String>("India", "USA", "Canada", "Germany","Australia")

@Composable
fun CountrySelection() {
    // State variables
    var countryName: String by remember { mutableStateOf(countriesList[0]) }
    var expanded by remember { mutableStateOf(false)}

    Box(Modifier.fillMaxWidth(),contentAlignment = Alignment.Center) {
        Row(
            Modifier
                .padding(24.dp)
                .clickable {
                    expanded = !expanded
                }
                .padding(8.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) { // 锚点触发视图
            Text(text = countryName,fontSize = 18.sp,modifier = Modifier.padding(end = 8.dp)) 
            Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = "选择国家")
        }
        // 下拉菜单和触发视图平级放置
        DropdownMenu(expanded = expanded, onDismissRequest = {
            expanded = false
        }) {
            countriesList.forEach{ country->
                DropdownMenuItem(onClick = {
                    expanded = false
                    countryName = country
                }) {
                    Text(text = country)
                }
            }
        }
    }
}

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