Jetpack Compose 中如何模糊工具栏背景

Question

Jetpack Compose 中如何模糊工具栏背景

7

在Jetpack Compose中，有一个名为Modifier.blur()的方法。但是它会使得应用在该容器上的内容模糊。

我有一个类似于以下结构的代码：

Box {
    Toolbar()
    Content()
}

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

如何实现？

- Daniel Däschle

你找到解决办法了吗？ - undefined

1

很遗憾，我没有。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darian-Cătălin Cucer · 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)
        )
    }
}