Android Compose下拉菜单背景模糊效果实现求助

核心实现思路 #

Compose自带的DropdownMenu没有直接提供背景模糊属性，需要通过自定义菜单内容容器，结合BackdropFilter（Android 12+）或RenderEffect（低版本兼容）实现模糊效果，同时配合半透明背景还原Figma设计的视觉表现。

具体代码实现 #

import android.os.Build
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RenderEffect
import androidx.compose.ui.graphics.Shader
import androidx.compose.ui.graphics.BlurEffect
import androidx.compose.ui.unit.dp

// 带模糊背景的下拉菜单示例组件
fun BlurDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = Modifier.clickable { expanded = true }) {
        // 菜单触发按钮
        Text(
            text = "选择选项",
            modifier = Modifier.padding(16.dp),
            style = MaterialTheme.typography.bodyLarge
        )
        Icon(
            imageVector = Icons.Default.ArrowDropDown,
            contentDescription = "展开菜单",
            modifier = Modifier.padding(start = 8.dp)
        )

        // 自定义模糊下拉菜单
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            // 清除默认背景，避免遮挡模糊效果
            colors = androidx.compose.material.DropdownMenuDefaults.colors(
                containerColor = Color.Transparent
            )
        ) {
            Box(
                modifier = Modifier
                    // 半透明底色，配合模糊增强视觉层次（匹配Figma设计）
                    .background(Color.White.copy(alpha = 0.9f))
                    // 分版本适配模糊实现
                    .then(
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
                            Modifier.backdropFilter(BlurEffect(radiusX = 12.dp, radiusY = 12.dp))
                        } else {
                            Modifier.graphicsLayer {
                                renderEffect = RenderEffect.createBlurEffect(
                                    radiusX = 12f,
                                    radiusY = 12f,
                                    edgeTreatment = Shader.TileMode.CLAMP
                                )
                            }
                        }
                    )
                    .padding(vertical = 4.dp)
            ) {
                Column {
                    DropdownMenuItem(onClick = { expanded = false }) {
                        Text(text = "选项1")
                    }
                    DropdownMenuItem(onClick = { expanded = false }) {
                        Text(text = "选项2")
                    }
                    DropdownMenuItem(onClick = { expanded = false }) {
                        Text(text = "选项3")
                    }
                }
            }
        }
    }
}

关键细节说明 #

• 清除默认背景：必须将DropdownMenu的containerColor设为透明，否则默认背景会覆盖模糊效果。
• 模糊兼容性处理：Android 12及以上用BackdropFilter+BlurEffect，低版本用RenderEffect实现模糊，保证全版本适配。
• 半透明背景配合：模糊效果需要底层内容透出，添加半透明背景可以让菜单既保留模糊质感，又保证文字可读性，匹配Figma设计。
• 模糊半径调整：根据设计需求修改radiusX/radiusY的值（一般8-16dp即可），避免过大导致性能问题。

替代方案（自定义Popup） #

如果系统DropdownMenu的布局限制无法满足需求，可以直接用Popup组件实现自定义下拉菜单，模糊逻辑完全一致：

// 核心逻辑和上面一致，将DropdownMenu替换为Popup，手动控制显示位置和尺寸
Popup(
    onDismissRequest = { expanded = false },
    alignment = Alignment.TopStart,
    offset = Offset(x = 0.dp, y = 48.dp)
) {
    // 这里放置带模糊背景的菜单内容，代码和上面的Box部分完全相同
}

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