Размытие контента, расположенного за карточкой, с помощью Jetpack Compose на Android ⇐ Android

[Anonymous]

Я пытаюсь добиться эффекта размытия, как показано в этом сообщении:


Я использую 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
) {

}
}

}
}

Однако я получаю следующий результат:


Как добиться того, чтобы твит над слоем спереди также размывал слой позади? Есть ли способ добиться этого?

Подробнее здесь: https://stackoverflow.com/questions/708 ... on-android