Android Compose VerticalPager如何实现首项居上、其余项垂直居中？

你的核心需求是让VerticalPager的首项顶屏显示，从第二项开始垂直居中，同时解决滚动过渡不流畅和固定内边距适配的问题，可以通过动态计算内边距+滚动过程平滑过渡来实现，具体方案如下：

实现思路 #

1. 动态计算居中内边距：基于当前布局的可用高度（而非固定dp）计算居中所需的上下内边距，适配不同设备屏幕。
2. 平滑过渡内边距：利用PagerState的currentPage和currentPageOffsetFraction，在页面滚动过程中让内边距线性渐变，避免突然跳转。
3. 精准控制状态：区分页面静止和滚动中的不同场景，分别处理首项和后续项的内边距逻辑。

完整代码示例 #

BoxWithConstraints {
    // 获取当前布局的可用高度（自动适配状态栏、导航栏等）
    val availableHeight = maxHeight
    // 卡片固定高度，与PageSize保持一致
    val cardHeight = 328.dp
    // 居中时所需的上下内边距
    val centeredPadding = (availableHeight - cardHeight) / 2

    val pagerState = rememberPagerState()

    // 动态计算contentPadding，实现平滑过渡
    val contentPadding by remember(pagerState, availableHeight, cardHeight) {
        derivedStateOf {
            val currentPage = pagerState.currentPage
            val offsetFraction = pagerState.currentPageOffsetFraction

            when {
                // 从第0页滚动到第1页：内边距从首项状态平滑过渡到居中状态
                currentPage == 0 && offsetFraction > 0 -> {
                    val top = 0.dp + offsetFraction * centeredPadding
                    val bottom = (availableHeight - cardHeight) - offsetFraction * (availableHeight - cardHeight - centeredPadding)
                    PaddingValues(top = top, bottom = bottom)
                }
                // 从第1页滚动回第0页：内边距从居中状态平滑过渡到首项状态
                currentPage == 1 && offsetFraction < 0 -> {
                    val top = centeredPadding + offsetFraction * centeredPadding
                    val bottom = centeredPadding - offsetFraction * (availableHeight - cardHeight - centeredPadding)
                    PaddingValues(top = top, bottom = bottom)
                }
                // 第0页静止时：顶部内边距0，底部内边距占满剩余空间
                currentPage == 0 -> PaddingValues(top = 0.dp, bottom = availableHeight - cardHeight)
                // 第1页及以后（含滚动中）：保持居中内边距
                else -> PaddingValues(vertical = centeredPadding)
            }
        }
    }

    VerticalPager(
        state = pagerState,
        contentPadding = contentPadding,
        pageSize = PageSize.Fixed(cardHeight),
    ) { idx ->
        FeedUi(feeds[idx])
    }
}

方案优势 #

• 适配所有设备：基于可用高度动态计算内边距，无需固定dp，完美适配不同尺寸的屏幕。
• 滚动过渡流畅：通过offsetFraction实现内边距的线性渐变，滚动过程无突兀跳转。
• 逻辑清晰可控：针对不同滚动场景做精细化处理，完全符合首项顶屏、后续项居中的需求。

内容的提问来源于stack exchange，提问作者dev.farmer