Jetpack Compose中背景渐变覆盖层模糊效果实现问题

你的代码里的.blur(16.dp)是直接模糊渐变覆盖层自身，而非模糊它下方的背景图，所以看不到预期的模糊效果。要实现背景图被渐变层模糊+半透明渐变叠加的效果，需要用BackdropFilter来模糊背后的内容，再叠加渐变层。

修改后的代码如下：

@Composable
fun GradientBackground(
    modifier: Modifier = Modifier,
    enableOverlay: Boolean = false,
    hasToolbar: Boolean = true,
    content: @Composable ColumnScope.() -> Unit
) {
    Box(modifier = modifier.fillMaxSize()) {
        // 办公背景图
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = R.drawable.splash),
            contentDescription = null,
            contentScale = ContentScale.Crop // 可选：确保图片铺满容器
        )

        if (enableOverlay) {
            // 先模糊背景，再叠加渐变层
            Box(modifier = Modifier.fillMaxSize()) {
                // 模糊背后的背景图
                BackdropFilter(
                    effect = BlurEffect(
                        radiusX = 16.dp.toPx(),
                        radiusY = 16.dp.toPx(),
                        edgeTreatment = EdgeTreatment.None // 边缘不额外处理
                    )
                ) {
                    // 透明占位盒，让BackdropFilter作用于整个区域
                    Box(modifier = Modifier.fillMaxSize())
                }
                // 叠加半透明渐变层
                Box(
                    modifier = Modifier.fillMaxSize()
                        .background(
                            brush = Brush.verticalGradient(
                                listOf(
                                    Color.Gray.copy(alpha = 0.8f),
                                    Color.Black.copy(alpha = 0.9f)
                                )
                            )
                        )
                )
            }
        }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .then(
                    if (hasToolbar) Modifier else Modifier.systemBarsPadding()
                )
        ) {
            content()
        }
    }
}

关键说明： #

• BackdropFilter：专门用于模糊元素背后的内容，需要传入BlurEffect指定模糊半径。要把它放在渐变层下方，让渐变层叠加在模糊后的背景之上。
• 模糊半径单位转换：BlurEffect需要像素值，所以用dp.toPx()转换dp单位。
• 性能注意事项：BackdropFilter会触发离屏渲染，可能影响性能。如果仅需局部模糊，建议缩小作用范围；同时确保开启硬件加速（默认已开启）。

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