如何在 Android Jetpack Compose 中的图像上应用半透明渐变？答案

【问题标题】：How to apply translucent gradient on an Image in Android Jetpack Compose?如何在 Android Jetpack Compose 中的图像上应用半透明渐变？
【发布时间】：2022-01-03 14:12:15
【问题描述】：

在 Android Jetpack Compose 中，有谁知道如何使图像的左侧慢慢淡出到右侧透明？谢谢！

编辑：抱歉，我的意思是在 Compose 中制作这样的图像褪色，可能是使用混合模式？但不知道该怎么做..

预期结果：

【问题讨论】：

标签： android image kotlin gradient android-jetpack-compose

【解决方案1】：

您可以在图像上放置一个 Box 并为 Box 添加背景渐变。您必须将 Box 的大小设置为与图像相同。在此示例中，我不费心正确设置 Box 大小。我会留给你的：

这是我使用的图片：

https://adelaidevet.com.au/sites/default/files/archive/files/images/cat-ginger-eyes-closed_0.jpg

val screenWidth = LocalConfiguration.current.screenWidthDp

Box(modifier = Modifier.fillMaxWidth().wrapContentHeight()) {
    Image(
        painterResource(R.drawable.cat),
        contentDescription = "",
        contentScale = ContentScale.FillWidth,
        modifier = Modifier.fillMaxWidth()
    )

    Box(
        modifier = Modifier
            .requiredWidth(screenWidth.dp)
            .requiredHeight(310.dp)
            .background(
                brush = Brush.horizontalGradient(
                    startX = 0f,
                    endX = 700f,
                    colors = listOf(
                        Color.Transparent,
                        Color(0xD7525252),

                    )
                )
            )
    ) {

    }
}

【讨论】：

嗨@Johann，感谢您的回复！不幸的是，我正在寻找使图像淡入透明而不是在其上方添加渐变。我已经更新了我的帖子以获得更清晰的预期结果。 :D

【解决方案2】：

刚从How to add fading edge effect to Android Jetpack Compose Column or Row?找到答案

“Color.Black”表示显示图像的区域。

谢谢大家！

Image(
    painterResource(R.drawable.cat),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier
        // Workaround to enable alpha compositing
        .graphicsLayer { alpha = 0.99f }
        .drawWithContent {
            val colors = listOf(
                Color.Black,
                Color.Transparent
            )
            drawContent()
            drawRect(
                brush = Brush.horizontalGradient(colors),
                blendMode = BlendMode.DstIn
            )
        }
)

【讨论】：