如何移除Jetpack Compose中DropdownMenu的阴影并实现全透明背景

要消除DropdownMenu的边框和阴影，仅修改MaterialTheme颜色是不够的——DropdownMenu默认通过elevation属性生成阴影，且容器自带默认视觉样式。直接在DropdownMenu组件上覆盖以下参数即可实现完全透明：

• 设置elevation = 0.dp：彻底移除阴影效果
• 设置containerColor = Color.Transparent：将容器背景设为完全透明（Material3 版本）
• （可选）设置shape = RectangleShape：去掉默认的圆角样式，让菜单完全贴合内容

修改后的完整代码 #

MaterialTheme(
    colors = MaterialTheme.colors.copy(
        background = Color.Transparent,
        onBackground = Color.Transparent,
        surface = Color.Transparent
    )
) {
    ListItemComposable(
        modifier = Modifier.align(Alignment.TopCenter),
        text = dropDownItems.first().name,
        onClick = { isDropDownMenuVisible = true }
    )

    DropdownMenu(
        expanded = isDropDownMenuVisible,
        onDismissRequest = { isDropDownMenuVisible = false },
        // 新增核心参数
        elevation = 0.dp,
        containerColor = Color.Transparent,
        shape = RectangleShape // 可选，按需保留/移除
    ) {
        dropDownItems.forEach { dropDownItem ->
            DropdownMenuItem(
                onClick = { isDropDownMenuVisible = false }
            ) {
                ListItemComposable(
                    modifier = Modifier,
                    text = dropDownItem.name
                ) {}
            }
        }
    }
}

针对Material2版本的适配 #

如果使用的是Material2（而非Material3），DropdownMenu没有containerColor参数，可通过modifier设置背景透明：

DropdownMenu(
    expanded = isDropDownMenuVisible,
    onDismissRequest = { isDropDownMenuVisible = false },
    elevation = 0.dp,
    modifier = Modifier.background(Color.Transparent),
    shape = RectangleShape
) {
    // 菜单内容不变
}

内容的提问来源于stack exchange，提问作者Bojan Antić