如何在Jetpack Compose中实现Fading Edge渐变边缘效果

原生Android View的fadingEdge效果核心是渐变遮罩的显示比例随滚动距离动态变化，Compose没有直接提供对应属性，可通过Modifier.drawWithContent配合滚动状态实现完全对齐的效果，以下是水平滚动Chips场景的实现方案：

核心实现代码 #

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.ScrollState
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.graphics.Offset
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Chip
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalDensity

@Composable
fun FadingEdgeChipsRow() {
    val scrollState = rememberScrollState()
    // 自定义渐变边缘的长度，可按需调整
    val fadingEdgeLength = 24.dp
    val fadingEdgeLengthPx = with(LocalDensity.current) { fadingEdgeLength.toPx() }
    // 页面背景色，需和你的页面实际背景保持一致，深色模式可适配切换
    val pageBackgroundColor = Color.White

    Row(
        modifier = Modifier
            .horizontalScroll(scrollState)
            .drawWithContent {
                // 优先绘制Chips内容本身
                drawContent()

                // 计算左侧渐变透明度：滚动距离小于渐变长度时随滚动逐步加深
                val leftFadeAlpha = if (scrollState.value > 0) {
                    minOf(scrollState.value / fadingEdgeLengthPx, 1f)
                } else 0f

                // 计算右侧渐变透明度：剩余可滚动距离小于渐变长度时随滚动逐步加深
                val rightScrollRemain = scrollState.maxValue - scrollState.value
                val rightFadeAlpha = if (rightScrollRemain > 0) {
                    minOf(rightScrollRemain / fadingEdgeLengthPx, 1f)
                } else 0f

                // 绘制左侧渐变遮罩
                if (leftFadeAlpha > 0f) {
                    drawRect(
                        brush = Brush.horizontalGradient(
                            colors = listOf(Color.Transparent, pageBackgroundColor),
                            endX = fadingEdgeLengthPx
                        ),
                        size = size.copy(width = fadingEdgeLengthPx),
                        alpha = leftFadeAlpha,
                        blendMode = BlendMode.DstIn
                    )
                }

                // 绘制右侧渐变遮罩
                if (rightFadeAlpha > 0f) {
                    drawRect(
                        brush = Brush.horizontalGradient(
                            colors = listOf(pageBackgroundColor, Color.Transparent),
                            startX = size.width - fadingEdgeLengthPx,
                            endX = size.width
                        ),
                        size = size.copy(width = fadingEdgeLengthPx),
                        topLeft = Offset(x = size.width - fadingEdgeLengthPx, y = 0f),
                        alpha = rightFadeAlpha,
                        blendMode = BlendMode.DstIn
                    )
                }
            }
    ) {
        // 替换为你的Chips列表逻辑
        repeat(15) { index ->
            Chip(onClick = { /* 点击逻辑 */ }, modifier = Modifier.padding(end = 8.dp)) {
                Text("分类标签 $index")
            }
        }
    }
}

效果对齐说明 #

• 初始状态下滚动偏移为0，渐变透明度为0完全不可见，和原生默认行为一致
• 滚动距离小于渐变长度时，渐变透明度随滚动距离线性增加，实现「跟随滚动逐步拉伸覆盖」的效果
• 滚动距离超过渐变长度后，渐变保持完全显示，仅当滚动到内容两端时自动隐藏
• 使用BlendMode.DstIn混合模式，不会出现多余的色块，渐变过渡自然

可复用优化 #

你可以将渐变逻辑封装为自定义Modifier，在所有水平滚动组件上复用：

fun Modifier.horizontalFadingEdge(
    scrollState: ScrollState,
    edgeLength: Dp = 24.dp,
    backgroundColor: Color = Color.White
) = composed(
    factory = {
        val edgeLengthPx = with(LocalDensity.current) { edgeLength.toPx() }
        this.drawWithContent {
            drawContent()
            val leftFadeAlpha = if (scrollState.value > 0) minOf(scrollState.value / edgeLengthPx, 1f) else 0f
            val rightFadeAlpha = if (scrollState.maxValue - scrollState.value > 0) minOf((scrollState.maxValue - scrollState.value) / edgeLengthPx, 1f) else 0f

            if (leftFadeAlpha > 0f) {
                drawRect(
                    brush = Brush.horizontalGradient(listOf(Color.Transparent, backgroundColor), endX = edgeLengthPx),
                    size = size.copy(width = edgeLengthPx),
                    alpha = leftFadeAlpha,
                    blendMode = BlendMode.DstIn
                )
            }
            if (rightFadeAlpha > 0f) {
                drawRect(
                    brush = Brush.horizontalGradient(listOf(backgroundColor, Color.Transparent), startX = size.width - edgeLengthPx),
                    size = size.copy(width = edgeLengthPx),
                    topLeft = Offset(size.width - edgeLengthPx, 0f),
                    alpha = rightFadeAlpha,
                    blendMode = BlendMode.DstIn
                )
            }
        }
    }
)

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