1

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

我正在使用 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
            ) {

            }
        }

    }
}

但是,我得到的输出是这样的:

我如何从前面的图层上方的推文中实现效果也模糊了后面的图层?有没有办法做到这一点?

4

0 回答 0