在合成中模糊背景图像

Question

我正在尝试模糊背景图像。

我有一张办公环境的背景图片，我在其中添加了背景叠加层。我想模糊并使其稍微透明的背景。

这是图像，正如您所看到的，叠加背景并不模糊。我曾经使用 Alpha 使其稍微透明。

这是我试图模糊的代码

@Composable
fun GradientBackground(
    modifier: Modifier = Modifier,
    enableOverlay: Boolean = false,
    hasToolbar: Boolean = true,
    content: @Composable ColumnScope.() -> Unit
) {

    Box(modifier = modifier
        .fillMaxSize()) {
        /* this is the office picture */
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = R.drawable.splash), contentDescription = null)

        if(enableOverlay) {
            /* This is the box and the backgroud I would like to blur over the image and make it slighty transparent */
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .background(brush = Brush.verticalGradient(
                        listOf(Color.Gray.copy(alpha = 0.8f), Color.Black.copy(alpha = 0.9f))),
                    )
                    .blur(16.dp)
            )
        }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .then(
                    if (hasToolbar) {
                        Modifier
                    } else {
                        Modifier.systemBarsPadding()
                    }
                )
        ) {
            content()
        }
    }
}

Answer 1

要模糊图像，请将

blur

修改器应用于

Image

本身，而不是应用于

Box

叠加层。

Image(
    modifier = Modifier.fillMaxSize().blur(16.dp),
    painter = painterResource(id = R.drawable.splash),
    contentDescription = null,
)

要使叠加层更加透明，请减小

alpha

的值。