无法向HorizontalPager中的页面提供graphicLayer{translationZ = 1}，zIndex()也不会产生任何效果

Question

我希望能够排列 HorizontalPager 页面，以便最终得到所示的效果。问题是我找不到一种方法让下一页位于

currentPage

后面。我尝试过

zIndex()

但没有结果，并且

graphicLayer{}

修饰符不支持

translationZ

属性。任何帮助将非常感激。

请在此处查看当前行为视频：https://drive.google.com/file/d/1fIPEvIgNN3iybN9AlMPN-cdX38rdDwO8/view?usp=sharing

我的代码如下：

@Composable
fun InboxWidgetContent() {
    val pagerState = rememberPagerState()
    val density = LocalDensity.current

    HorizontalPager(
        modifier = Modifier,
        pageCount = Int.MAX_VALUE,
        state = pagerState,
        beyondBoundsPageCount = 1,
    ) { page ->
        val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction)
        Card(
            modifier = Modifier
                .zIndex(page.toFloat())
                .padding(start = 8.dp, end = 8.dp, top = 16.dp, bottom = 4.dp)
                .fillMaxWidth()
                .clickable {}
                .graphicsLayer {
                    alpha = when {
                        pageOffset >= 0f -> 1f
                        pageOffset >= -2f -> 1.8f + pageOffset
                        else -> 0f
                    }
                    translationX = lerp(
                        start = size.width * -2f - with(density) { 32.dp.toPx() },
                        stop = 0f,
                        fraction = ((pageOffset + 2) / 2).coerceIn(0f, 1f)
                    )
                    translationY = when {
                        pageOffset >= 0f -> 0f
                        pageOffset >= -2f -> abs(pageOffset) * -32f
                        else -> translationY
                    }
                    scaleX = lerp(
                        start = 0.8f,
                        stop = 1f,
                        fraction = ((pageOffset + 2) / 2).coerceIn(0f, 1f)
                    )
                },
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = stringResource(Widget.Inbox.labelRes),
                    style = MaterialTheme.typography.h6,
                )
            }
        }
    }
}

Answer 1

替换这个：

.zIndex(page.toFloat())

有了这个：

.zIndex(if (page == pagerState.currentPage) 1f else 0f)