如何在Android Jetpack Compose中为图片添加半透明渐变效果

实现逻辑 #

通过drawWithContent修饰符在图片绘制完成后叠加渐变遮罩，结合BlendMode.DstIn混合模式，直接用遮罩的透明度控制图片对应位置的透明度，无需复杂的自定义绘制逻辑。

完整代码示例 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun FadeEndImage() {
    Image(
        painter = painterResource(id = R.drawable.your_target_image), // 替换为你的图片资源ID
        contentDescription = null,
        modifier = Modifier
            .size(300.dp) // 按需调整图片尺寸
            // 低版本兼容：需要支持API26以下请打开下一行注释
            // .graphicsLayer(alpha = 0.99f)
            .drawWithContent {
                // 绘制原始图片
                drawContent()
                // 绘制渐变遮罩控制透明度
                drawRect(
                    brush = Brush.horizontalGradient(
                        colors = listOf(Color.Black, Color.Transparent),
                        // 可选：调整渐变结束位置，示例为渐变到70%宽度时完全透明
                        // endX = size.width * 0.7f
                    ),
                    blendMode = BlendMode.DstIn
                )
            }
    )
}

常用调整参数 #

• 渐变方向修改：将horizontalGradient替换为verticalGradient即可实现上下渐变透明效果
• 渐变范围调整：修改horizontalGradient的startX、endX参数，可自定义渐变的起始、结束位置
• 反向渐变：调整colors顺序为listOf(Color.Transparent, Color.Black)，即可实现左侧透明、右侧正常显示的效果

内容的提问来源于stack exchange，提问作者yao