Jetpack Compose实现滚动1.5倍屏幕后背景透明度渐隐

要实现你需要的效果，核心是基于总滚动距离和屏幕高度的关系来调整背景透明度，而不是依赖单个列表项的偏移。以下是修改后的完整代码：

val list = mutableListOf<String>().apply {
    for (i in 0..1000) {
        add("Item $i")
    }
}

setContent {
    val lazyListState = rememberLazyListState()
    // 获取屏幕高度（转换为像素值）
    val screenHeightPx = with(LocalDensity.current) {
        LocalConfiguration.current.screenHeightDp.dp.toPx()
    }
    // 开始淡出的滚动阈值：1.5倍屏幕高度
    val startFadeThreshold = screenHeightPx * 1.5f
    // 完全消失的滚动阈值：在开始阈值基础上再加1倍屏幕高度（可根据需求调整这个范围）
    val endFadeThreshold = startFadeThreshold + screenHeightPx

    // 计算当前总滚动距离
    val totalScrollDistance by remember {
        derivedStateOf {
            // 累加前面所有已滚出屏幕的列表项高度
            val previousItemsHeight = lazyListState.layoutInfo.visibleItemsInfo
                .filter { it.index < lazyListState.firstVisibleItemIndex }
                .sumOf { it.size }
                .toFloat()
            // 加上当前第一个可见项的滚动偏移
            previousItemsHeight + lazyListState.firstVisibleItemScrollOffset
        }
    }

    // 计算背景透明度
    val backgroundAlpha by remember {
        derivedStateOf {
            when {
                // 滚动距离未达阈值，背景完全显示
                totalScrollDistance <= startFadeThreshold -> 1f
                // 滚动距离超过结束阈值，背景完全消失
                totalScrollDistance >= endFadeThreshold -> 0f
                // 在阈值区间内，线性降低透明度
                else -> {
                    val fadeProgress = (totalScrollDistance - startFadeThreshold) / (endFadeThreshold - startFadeThreshold)
                    1f - fadeProgress
                }
            }
        }
    }

    ScrollableBackgroundTheme {
        Box {
            Image(
                painter = painterResource(id = R.drawable.main_background),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .graphicsLayer {
                        alpha = backgroundAlpha
                    }
            )

            LazyColumn(state = lazyListState) {
                items(list.size) { index ->
                    Text(text = list[index], modifier = Modifier.padding(20.dp))
                }
            }
        }
    }
}

关键修改说明： #

• 屏幕高度获取：通过LocalConfiguration和LocalDensity获取屏幕高度的像素值，确保计算的滚动阈值符合实际屏幕尺寸。
• 总滚动距离计算：不仅计算当前可见项的偏移，还累加了所有已滚出屏幕的列表项高度，得到真实的总滚动距离。
• 透明度区间控制：
  • 当滚动距离≤1.5倍屏幕高度时，背景保持完全显示（alpha=1）。
  • 当滚动距离≥2.5倍屏幕高度（1.5+1倍）时，背景完全消失（alpha=0）。
  • 中间区间内，透明度随滚动距离线性降低，实现平滑过渡效果。
• 自定义淡出范围：如果希望背景更快/更慢消失，可以调整endFadeThreshold的计算逻辑，比如改为startFadeThreshold + screenHeightPx * 0.5f，让背景在滚动额外0.5倍屏幕高度后完全消失。

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