如何让Jetpack Compose的HorizontalPager中心项置于右侧项上方？

问题原因 #

使用zIndex未生效，核心原因是HorizontalPager的子项布局顺序会影响层级优先级：默认情况下，布局顺序靠后的Item（比如右侧项）在绘制层级上天然高于前面的Item，仅判断当前页设置zIndex无法覆盖这种布局顺序带来的层级差异；另外graphicsLayer的变换会创建独立绘制层，若zIndex放在其之后，仅能作用于该层内部，无法影响外部层级关系。

修复方案 #

方案1：动态调整zIndex，确保中心项层级高于右侧项 #

不要仅判断是否为当前页，而是让中心项的zIndex始终高于其右侧重叠的项：

@Composable
private fun PagerScope.Square(currentPage: Int, page: Int, bitmap: Bitmap, onClickListener: (Int) -> Unit) {
    val zIndexValue = when {
        // 中心项zIndex设为最高，右侧相邻项次之，其余为基础层级
        page == currentPage -> 2f
        page == currentPage + 1 -> 1f
        else -> 0f
    }
    Image(
        modifier = Modifier
            .zIndex(zIndexValue) // 将zIndex放在graphicsLayer之前，确保层级优先级生效
            .graphicsLayer(animation(page))
            .background(Background.BgSecondary)
            .size(SQUARE_SIZE),
        bitmap = bitmap,
        contentDescription = "Square item $page"
    )
}

方案2：逆序布局Item，让中心项天然处于更高层级 #

通过反转Item的布局顺序，让原本的右侧项先渲染、中心项后渲染，利用Compose“后渲染项层级更高”的特性实现需求：

HorizontalPager(
    itemSpacing = -Grid.DP_40,
    contentPadding = PaddingValues(horizontal = (LocalConfiguration.current.screenWidthDp.dp - QR_SIZE) / 2),
    count = state.items.size,
    state = pagerState
) { page ->
    // 逆序取Item，同步调整页面映射逻辑
    val reversedPage = state.items.size - 1 - page
    val actualCurrentPage = state.items.size - 1 - pagerState.currentPage
    Square(actualCurrentPage, reversedPage, state.items[reversedPage].square, onClickedListener)
}

关键注意事项 #

• zIndex必须放在graphicsLayer之前，否则仅能作用于graphicsLayer创建的独立绘制层内部，无法影响Item间的层级关系。
• 当使用负itemSpacing实现Item重叠时，需确保所有与中心项重叠的右侧项层级都低于中心项，动态判断zIndex的方式更适配滚动过程中的层级变化。

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