Jetpack Compose HorizontalPager实现相邻页面部分可见的正确配置

要实现这种相邻页面部分露出的效果，核心是利用HorizontalPager的contentPadding属性配合页面宽度控制，以下是具体的配置方式：

1. 确保依赖引入 #

首先确认项目中引入了Foundation Pager库（版本可根据Compose版本调整）：

// build.gradle.kts 或 build.gradle
implementation "androidx.compose.foundation:foundation-pager:1.6.0"

2. 核心实现代码 #

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PartialVisibleTwoPager() {
    // 定义相邻页面需要露出的宽度
    val exposedWidth = 24.dp
    val pagerState = rememberPagerState(pageCount = { 2 })

    HorizontalPager(
        state = pagerState,
        // 给Pager整体设置左右内边距，用于显示相邻页面的部分区域
        contentPadding = androidx.compose.foundation.layout.PaddingValues(horizontal = exposedWidth),
        // 页面间距设为0，避免额外空白影响视觉
        pageSpacing = 0.dp,
        modifier = Modifier.fillMaxSize()
    ) { pageIndex ->
        Card(
            modifier = Modifier
                // 页面占满Pager的可用宽度（即屏幕宽度减去左右内边距）
                .fillMaxWidth()
                // 可选：给页面添加水平内边距，让页面之间有小间隔
                .padding(horizontal = 8.dp)
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "页面 ${pageIndex + 1}")
            }
        }
    }
}

关键配置说明 #

• contentPadding：这是实现效果的核心，通过给Pager设置左右内边距，让可视区域超出当前页面的边界，从而显示相邻页面的部分内容。内边距的数值就是你希望露出的相邻页面宽度。
• pageSpacing：设置为0dp，因为contentPadding已经为相邻页面留出了显示空间，额外的pageSpacing会导致页面之间出现不必要的空白。
• 页面宽度控制：每个页面使用fillMaxWidth()，Pager会自动计算出页面的可用宽度（屏幕宽度 - 左右contentPadding总和），确保当前页面居中显示，左右刚好露出相邻页面的指定宽度。

如果之前尝试单独使用pageSpacing或graphicsLayer，前者只会增加页面间空白，后者容易导致触摸交互区域异常，而上述基于contentPadding的方案是官方推荐的标准实现方式，能同时保证视觉效果和交互逻辑的正确性。

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