Jetpack compose 上的模糊工具栏背景

Question

Jetpack Compose 中有该Modifier.blur()方法。但它模糊了它所应用的容器的内容。

我有一个类似的结构：

Box {
    Toolbar()
    Content()
}

工具栏位于 z 轴内容上方。我想给工具栏一些不透明度，并模糊工具栏后面内容中的所有内容。

如何实现这一目标？

Answer 1

@Composable
fun BlurredBackground() {
    Box {
        Content()
        
        // blur effect
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Transparent)
                .zIndex(1f)
        ) {
            BackdropFilter(
                filter = ImageFilter.blur(10f), // adjust the blur
                content = { }
            )
        }
        
        Toolbar(Modifier
            .fillMaxWidth()
            .background(Color.White.copy(alpha = 0.7f)) // adjust the opacity
            .zIndex(2f)
        )
    }
}