无法更改 DropdownMenu 的背景

Question

我正在尝试关注 this tutorial

但我需要更多关于下拉列表的自定义 UI。我需要使弹出窗口背景变圆。但是当我将 .clip(RoundedCornerShape(20)) 添加到 DropdownMenu 的修饰符中时，它仍然具有白色背景

下面是我的测试可组合代码：

@ExperimentalFoundationApi
@ExperimentalCoilApi
@Composable
fun TestScreen(
   navigator: AppNavigator,
) {
    var expanded by remember { mutableStateOf(false) }
    val items = listOf("A", "B", "C", "D", "E", "F")
    val disabledValue = "B"
    var selectedIndex by remember { mutableStateOf(0) }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan)
            .padding(top = 70.dp)
            .wrapContentSize(Alignment.TopStart)
    ) {
        Text(
            items[selectedIndex],
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = { expanded = true })
                .background(
                    Color.Gray
                )
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(20))
                .background(
                    Color.Red
                )
        ) {
            items.forEachIndexed { index, s ->
                DropdownMenuItem(onClick = {
                    selectedIndex = index
                    expanded = false
                }) {
                    Text(text = s)
                }
            }
        }
    }
}

我还能剪裁、画边框、设置背景色。但是白色背景还在。

我试图查看 DropDownMenu 的源代码，但我似乎无法找到它的位置。我是 Jetpack Compose 的新手，所以我可能错过了一些东西。

Answer 1

DropdownMenu 看起来像这样 because 默认的 Card 参数。您可以像这样为您的视图覆盖它们：

MaterialTheme(
    colors = MaterialTheme.colors.copy(surface = Color.Red),
    shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(20))
) {
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier
            .fillMaxWidth()
    ) {
        // ...
    }
}

无法更改 DropdownMenu 的背景

Cannot change the background of DropdownMenu

drop-down-menu

android-jetpack-compose