Jetpack Compose LazyColumn堆叠滚动效果实现问询

我正在尝试用Jetpack Compose的LazyColumn实现堆叠滚动效果，核心逻辑是最顶部的项固定，下方项上滑并堆叠至顶部。

预期行为 #

• 首个项始终固定在顶部，不会滚出视野；
• 上滑时，下一项逐步上移并替换顶部项；
• 当该项完全覆盖固定项后，成为新的顶部固定项；
• 重复此过程，随滚动不断堆叠新项；
• 下滑时，项会平滑展开，逐一显示之前的项。

实现代码 #

@Composable
fun FeatureDestinations(
    modifier: Modifier = Modifier,
    featureDestinations: List<FeatureDestination>,
    onClickDestination: (FeatureDestination) -> Unit,
) {
    val context = LocalContext.current
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState,
        modifier = Modifier
            .fillMaxSize()
            .clip(RoundedCornerShape(32.dp))
            .padding(horizontal = 20.dp),
        contentPadding = PaddingValues(top = 20.dp),
        verticalArrangement = Arrangement.spacedBy(-100.dp) // Negative spacing for overlap
    ) {
        itemsIndexed(featureDestinations) { index, feature ->
            val visibleItems = listState.layoutInfo.visibleItemsInfo
            val itemInfo = visibleItems.find { it.index == index }
            val nextItemInfo = visibleItems.find { it.index == index + 1 }

            var offsetY = 0f

            if (nextItemInfo != null && itemInfo != null) {
                val overlapAmount = (nextItemInfo.offset - itemInfo.offset).coerceAtLeast(0)
                offsetY = overlapAmount.toFloat()
            }

            FeatureCard(
                modifier = Modifier
                    .fillMaxWidth()
                    .graphicsLayer {
                        translationY = -offsetY // Moves up smoothly
                    }
                    .zIndex(1f - index.toFloat()), // Ensures correct layering
                backgroundColor = feature.bgColor,
                title = feature.title.asString(context),
                onClick = { onClickDestination(feature) }
            )
        }
    }
}

效果展示 #

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