在 Android 上使用 Jetpack Compose 模糊卡片后面分层的内容

Question

我正在尝试实现像这篇文章中突出显示的模糊效果：

我正在使用 Jetpack Compose：

@Composable
fun MainApp() {
    val linearGradientBrush = Brush.linearGradient(
        colors = listOf(
            Color(0xFF5995EE),
            Color(0xFFB226E1),
            Color(0xFFE28548)
        ),
        start = Offset(Float.POSITIVE_INFINITY, 0f),
        end = Offset(0f, Float.POSITIVE_INFINITY),
    )

    val transparentGradientBrush = Brush.linearGradient(
        colors = listOf(
            Color(0x66FFFFFF),
            Color(0x1AFFFFFF)
        )
    )
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box() {
            Card(
                modifier = Modifier
                    .size(150.dp)
//                    .blur(10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
                    .clip(shape = CircleShape)

                    .background(linearGradientBrush),

                backgroundColor = Color.Transparent,
                elevation = 0.dp,
            ) {
            }

            Card(
                modifier = Modifier
                    .size(150.dp)
                    .offset(x = -75.dp, y = 40.dp)
                    .blur(5.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
                    .clip(RoundedCornerShape(30.dp))
                    .background(transparentGradientBrush),
                backgroundColor = Color.Transparent,
                elevation = 0.dp
            ) {

            }
        }

    }
}

但是，我得到的输出是这样的：

如何实现前面图层上方的推文同时模糊后面图层的效果？有没有办法实现这个目标？

Answer 1

https://github.com/x3rocode/xblur-compose/tree/main

我做了简单的实时合成模糊！
尝试这个。