Android Compose HorizontalPager相邻页面接触重叠问题如何解决

使用Android Compose的HorizontalPager实现轮播组件时，出现相邻页面边缘接触、异常重叠的问题，问题效果如下：

问题复现代码：

HorizontalPager(
        count = 4,
        state = pagerState,
        contentPadding = PaddingValues(end = 82.dp),
        itemSpacing = (-50).dp,
        modifier = Modifier
            .fillMaxWidth()
            .background(color = Color.Transparent)
            .constrainAs(cardCaroussel) { },
    ) { page ->
        Card(
            Modifier
                .background(color = Color.Transparent)
                .graphicsLayer {
                    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

                    lerp(
                        start = 0.85f,
                        stop = 1f,
                        fraction = 3f - pageOffset.coerceIn(0f, 1f)
                    ).also { scale ->
                        scaleX = scale
                        scaleY = scale
                    }

                    alpha = lerp(
                        start = 0.5f,
                        stop = 1f,
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    )
                }
                .fillMaxWidth()
                .aspectRatio(1.5f)
        ) {
            Box {
                Image(
                    painter = painterResource(id = R.drawable.cb_nikel),
                    contentDescription = "",
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Transparent)
                        .padding(start = 62.dp)
                )
            }
        }
    }

重叠问题由3个配置错误共同导致：

• itemSpacing被设置为-50dp的负值：该参数用于定义相邻item的留白间距，负值会强制让两个相邻item向对方偏移，直接造成布局层面的重叠。
• 缩放动效的插值计算逻辑错误：缩放逻辑中fraction = 3f - pageOffset.coerceIn(0f, 1f)的写法不符合偏移量取值范围，会导致相邻页面的缩放值计算异常，出现尺寸溢出。
• 卡片内Image多余的左内边距：62dp的start padding让图片内容向右侧偏移，视觉上进一步加重了重叠错位的观感。

• 移除itemSpacing的负值配置，根据需要的相邻卡片间距设置为非负数值，若不需要额外间距可直接设为0.dp。
• 修正缩放动效的插值计算逻辑，将fraction改为1f - pageOffset.coerceIn(0f, 1f)，保证缩放值从当前页的1f到相邻页的0.85f平滑过渡。
• 靠contentPadding实现「露出下一页预览」的轮播效果，不需要用负间距强制偏移item。
• 移除Image上多余的62dp start padding，避免内容错位。

修复后的可运行代码：

HorizontalPager(
    count = 4,
    state = pagerState,
    // 靠左右内边距实现下一页露出效果，不需要负间距
    contentPadding = PaddingValues(start = 16.dp, end = 72.dp),
    // 间距设为非负值，比如需要相邻卡片留12dp空隙就填12.dp
    itemSpacing = 12.dp,
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.Transparent)
        .constrainAs(cardCaroussel) { },
) { page ->
    Card(
        Modifier
            .graphicsLayer {
                val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
                // 修正插值计算逻辑
                val scaleFactor = lerp(
                    start = 0.85f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
                scaleX = scaleFactor
                scaleY = scaleFactor

                alpha = lerp(
                    start = 0.5f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
            }
            .fillMaxWidth()
            .aspectRatio(1.5f)
    ) {
        Box {
            Image(
                painter = painterResource(id = R.drawable.cb_nikel),
                contentDescription = "",
                modifier = Modifier
                    .fillMaxSize()
                // 移除多余的左padding
            )
        }
    }
}

注意：Card组件默认自带白色背景和圆角，不需要额外给Card或内部元素设置透明背景，多余的透明背景配置可以直接删除。

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