基于Jetpack Compose实现Android卡片轮播组件

一、用LazyColumn实现连续堆叠滚动效果 #

完全可以用LazyColumn实现类似的卡片堆叠/渐变滚动效果，核心是利用LazyList的布局信息动态调整每个卡片的视觉参数（缩放、透明度、偏移）。

示例代码：

@Composable
fun StackedCardList(cards: List<String>) {
    val listState = rememberLazyListState()
    LazyColumn(
        state = listState,
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(-40.dp), // 负间距让卡片重叠
        contentPadding = PaddingValues(vertical = 80.dp)
    ) {
        itemsIndexed(cards) { index, text ->
            val itemOffset = listState.firstVisibleItemScrollOffset + 
                listState.layoutInfo.visibleItemsInfo.getOrNull(index)?.offset ?: 0
            val scrollProgress = itemOffset / 300f // 控制变换速率，可按需调整

            Card(
                modifier = Modifier
                    .size(280.dp, 360.dp)
                    .graphicsLayer {
                        // 根据滚动进度调整视觉参数
                        scaleX = 1f - scrollProgress * 0.1f
                        scaleY = 1f - scrollProgress * 0.1f
                        alpha = 1f - scrollProgress * 0.3f
                        translationY = scrollProgress * 20.dp.toPx()
                    },
                elevation = 8.dp
            ) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = text, fontSize = 24.sp)
                }
            }
        }
    }
}

通过设置负的verticalArrangement间距让卡片重叠，再结合滚动偏移量计算每个卡片的视觉变换，就能实现滚动时卡片逐渐缩小、透明并偏移的堆叠效果。

二、调整Accompanist VerticalPager实现分页堆叠样式 #

如果你想用VerticalPager实现类似效果，需要修改默认分页行为，让前后页面部分可见，并利用页面偏移量做视觉变换：

示例代码：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun StackedVerticalPager(cards: List<String>) {
    val pagerState = rememberPagerState()
    VerticalPager(
        count = cards.size,
        state = pagerState,
        contentPadding = PaddingValues(vertical = 60.dp), // 让前后页面露出部分区域
        pageSpacing = -40.dp, // 设置负间距让页面重叠
        modifier = Modifier.fillMaxWidth()
    ) { page ->
        val pageOffset = pagerState.currentPageOffsetFraction
        val offset = when {
            page == pagerState.currentPage -> pageOffset
            page > pagerState.currentPage -> 1f + pageOffset
            else -> -1f + pageOffset
        }

        Card(
            modifier = Modifier
                .size(280.dp, 360.dp)
                .graphicsLayer {
                    // 根据页面偏移调整视觉参数
                    scaleX = 1f - abs(offset) * 0.1f
                    scaleY = 1f - abs(offset) * 0.1f
                    alpha = 1f - abs(offset) * 0.3f
                    translationY = offset * 30.dp.toPx()
                },
            elevation = 8.dp
        ) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = cards[page], fontSize = 24.sp)
            }
        }
    }
}

这里通过contentPadding让非当前页面露出一部分，pageSpacing设置负间距让页面重叠，再根据currentPageOffsetFraction计算每个页面的偏移量，应用缩放、透明度和位移变换，就能实现分页式的卡片堆叠效果。

两者的区别：LazyColumn适合连续滚动的堆叠场景，VerticalPager更偏向分页切换的堆叠效果，可根据实际交互需求选择。

内容的提问来源于stack exchange，提问作者IMAX 3D