HorizontalPager页面层级问题：zIndex与translationZ均无法生效求助

问题根源 #

HorizontalPager内部的页面默认按索引顺序渲染，索引越大的页面会默认显示在上方。你当前使用zIndex(page.toFloat())会让后续页面（索引更大）的层级更高，与需求完全相反；同时旧版Compose中graphicsLayer确实不支持translationZ，因此需要通过正确计算zIndex来实现层级控制。

解决方案 #

通过动态计算zIndex，让当前页的层级最高，后续页面的层级低于当前页。以下是修改后的代码：

@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)
        // 核心修改：控制后续页面层级低于当前页
        val zIndexValue = if (page > pagerState.currentPage) -1f else 1f

        Card(
            modifier = Modifier
                .zIndex(zIndexValue)
                .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,
                )
            }
        }
    }
}

代码说明 #

• zIndexValue的逻辑：当前页和已滑过的页面zIndex设为1，后续页面设为-1。由于zIndex值越大层级越高，后续页面会被当前页覆盖在下方；同时因为HorizontalPager按索引顺序渲染，当前页会自动覆盖已滑过的页面（即使zIndex相同，后渲染的元素层级更高）。
• 如果需要更细腻的层级过渡（比如已滑过的页面距离当前页越远层级越低），可以将zIndexValue改为：

  val zIndexValue = if (page <= pagerState.currentPage) {
      (pagerState.currentPage - page + 1).toFloat()
  } else {
      -1f
  }
  

  这样当前页的zIndex为1，已滑过的页面层级随距离增加依次降低，后续页面始终处于最低层级。

内容的提问来源于stack exchange，提问作者Duenytz Sierra