Jetpack Compose：如何修改ExposedDropdownMenuBox背景色及去除下划线

1. 设置背景色（透明或匹配界面） #

在ExposedDropdownMenuDefaults.textFieldColors中，通过containerColor参数直接控制输入框的背景：

• 要实现透明效果，传入Color.Transparent即可
• 要匹配当前界面背景，替换为对应背景色值

2. 去除下拉框下方的线条 #

下拉框的底部线条是输入框的状态指示器，只需将聚焦、未聚焦状态下的指示器颜色都设为透明：

• 分别设置focusedIndicatorColor和unfocusedIndicatorColor为Color.Transparent
• 新版Compose（1.4+）也可直接用indicatorColor = Color.Transparent统一覆盖两种状态

完整代码示例 #

var expanded by remember { mutableStateOf(false) }
val options = listOf("Option 1", "Option 2", "Option 3")
var selectedOptionText by remember { mutableStateOf(options[0]) }

ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = !expanded }
) {
    TextField(
        value = selectedOptionText,
        onValueChange = {},
        readOnly = true,
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        },
        colors = ExposedDropdownMenuDefaults.textFieldColors(
            // 设置背景为透明
            containerColor = Color.Transparent,
            // 去除底部线条
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            // 保留你原有的颜色配置
            focusedTextColor = Color.Red,
            disabledPlaceholderColor = Color.Green
        ),
        modifier = Modifier.menuAnchor()
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        options.forEach { selectionOption ->
            DropdownMenuItem(
                text = { Text(selectionOption) },
                onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                }
            )
        }
    }
}

补充提示 #

如果需要下拉菜单的背景也匹配界面，给ExposedDropdownMenu添加modifier = Modifier.background(你的目标颜色)即可。

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