Jetpack Compose中DropdownMenu不显示问题排查求助

你的DropdownMenu无法显示主要有以下几个问题，逐一修正即可：

1. 错误使用非内置组件ButtonGroup #

Jetpack Compose没有内置ButtonGroup组件，当前写法会导致DropdownButton无法正常渲染，直接移除ButtonGroup，将DropdownButton直接放置在Column中即可。

2. DropdownMenu错误设置fillMaxSize修饰符 #

DropdownMenu是弹窗式组件，不需要设置fillMaxSize，该修饰符会强制它占满父布局，导致菜单内容被挤压或布局异常，直接移除这个修饰符。

3. 父Box缺少规范修饰符（可选优化） #

虽然不是导致不显示的直接原因，但DropdownButton中的Box建议添加Modifier.wrapContentSize()来包裹内容，保证布局合理性。

修正后的完整代码 #

@Composable
fun DropdownButton(buttonText: String, menuList: List<String>) {
    Box(
        modifier = Modifier.wrapContentSize()
    ) {
        Button(onClick = {}) {
            Text(buttonText)
        }
        DropdownMenu(expanded = true, onDismissRequest = {}) {
            menuList.forEach {
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Text(text = it)
                }
            }
        }
    }
}

@Composable
fun UnitConvert(name: String = "Akshay", modifier: Modifier? = null) {
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Column(
            Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Unit Convertor", color = MaterialTheme.colors.primary)
            OutlinedTextField(
                value = "",
                onValueChange = {},
                placeholder = { Text(text = "Enter value") }
            )
            DropdownButton(
                buttonText = "Input Unit",
                menuList = listOf("Ton", "Kilogram", "Gram", "Milligram")
            )
        }
    }
}

额外优化建议 #

当前你将expanded设为true强制显示菜单，实际开发中建议用状态控制菜单的展开/收起逻辑：

@Composable
fun DropdownButton(buttonText: String, menuList: List<String>) {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier.wrapContentSize()
    ) {
        Button(onClick = { expanded = !expanded }) {
            Text(buttonText)
        }
        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            menuList.forEach {
                DropdownMenuItem(onClick = { 
                    expanded = false
                    // 补充菜单点击逻辑
                }) {
                    Text(text = it)
                }
            }
        }
    }
}

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