Jetpack Compose 如何模糊背景

在Jetpack Compose中，你可以使用`BoxWithBlurBackground`来模糊背景。这个函数实际上是一个自定义的Compose函数，它接收两个参数：内容和模糊程度。它使用`BackdropFilter`来实现模糊效果。

这里是一个示例：

@Composable
fun BoxWithBlurBackground(
    blurRadius: Dp = 5.dp,
    content: @Composable () -> Unit
) {
    val overlay = Modifier.drawBehind {
        val alpha = 0.7f
        val color = Color.Black.copy(alpha = alpha)
        drawRect(color)
    }

    Box(
        overlay,
        contentAlignment = Alignment.Center,
        content = content
    )
}

@Composable
fun BlurredBackgroundDemo() {
    BoxWithBlurBackground(blurRadius = 10.dp) {
        Column(
            modifier = Modifier
                .padding(16.dp)
                .background(Color.White)
                .fillMaxWidth()
        ) {
            Text(
                text = "Hello, Jetpack Compose!",
                modifier = Modifier.padding(16.dp),
                style = TextStyle(fontSize = 24.sp)
            )
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier.align(Alignment.CenterHorizontally)
            ) {
                Text("Click me!")
            }
        }
    }
}

在这个例子中，我们首先定义了一个`BoxWithBlurBackground`函数，它使用`drawBehind`绘制一个半透明的黑色矩形作为背景遮罩，并将其应用于`Box`中。我们还定义了一个示例函数`BlurredBackgroundDemo`，它使用`BoxWithBlurBackground`来模糊其子元素。在这个示例中，我们只是简单地在`Box`中放置了一个带有文本和按钮的`Column`。