求助:在Jetpack Compose中实现带元素覆盖的无限轮播
需求:实现垂直无限轮播(带层级覆盖+缩放效果)
需要实现如下效果的垂直无限轮播:
已尝试的方案及问题
- 使用Accompanist Pager库:该库已废弃,且不支持元素覆盖效果
- 使用VerticalPager:效果不符合预期,实际效果如下:


实现代码: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那样停留在指定项,实际效果如下:

实现代码: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
相关产品推荐
相关产品推荐

