You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:在Jetpack Compose中实现带元素覆盖的无限轮播

需求:实现垂直无限轮播(带层级覆盖+缩放效果)

需要实现如下效果的垂直无限轮播:
目标垂直轮播效果

已尝试的方案及问题

  • 使用Accompanist Pager库:该库已废弃,且不支持元素覆盖效果
  • 使用VerticalPager:效果不符合预期,实际效果如下:
    VerticalPager效果1
    VerticalPager效果2
    实现代码:
    VerticalPager(
        state = horizontalState,
        modifier = Modifier.fillMaxWidth().height(110.dp).padding(start = 16.dp, top = 22.dp, end = 16.dp),
        pageSize = PageSize.Fixed(70.dp)
    ) { page ->
        Card(
            modifier = Modifier
                .zIndex(page * 10f)
                .graphicsLayer {
                    val startOffset =
                        ((horizontalState.currentPage - page) + horizontalState.currentPageOffsetFraction).absoluteValue
    
                    val scale = 1f - (startOffset * 0.15f)
                    scaleX = scale
                    scaleY = scale
                }
                .clip(RoundedCornerShape(16.dp))
        ) {/*item*/}
    }
    
  • 使用LazyColumn:效果不符合预期,且无法像ViewPager那样停留在指定项,实际效果如下:
    LazyColumn效果
    实现代码:
    BoxWithConstraints(
        modifier = Modifier.fillMaxWidth().height(110.dp)
    ) {
        val halfHeight = constraints.maxHeight / 2
    
        LazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            items(
                count = Int.MAX_VALUE,
                itemContent = { globalIndex ->
                    val page = globalIndex % movies.size
                    val scale by remember {
                        derivedStateOf {
                            val currentItem = listState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == globalIndex } ?: return@derivedStateOf 0.85f
                            (1f - minOf(1f, abs(currentItem.offset + (currentItem.size / 2) - halfHeight).toFloat() / halfHeight) * 0.25f)
                        }
                    }
    
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(70.dp)
                            .scale(scale)
                            .zIndex(page * 10f)
                    ) {/*item*/}
                }
            )
        }
    }
    

内容的提问来源于stack exchange,提问作者Pavlo Kravchenko

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 08:12:43