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

Question

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

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

预期结果：

Answer 1

您可以在图像上放置一个方框，然后向方框添加背景渐变。您必须将 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),

                    )
                )
            )
    ) {

    }
}

Answer 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
            )
        }
)

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

How to apply translucent gradient on an Image in Android Jetpack Compose?

android

gradient

image

kotlin

android-jetpack-compose