如何在Jetpack Compose中让Horizontal Pager显示屏幕外页面？

效果对比 #

• 当前效果：每页占满屏幕宽度，拖动时仅能切换整页，无法看到左右相邻页面
• 预期效果：页面居中显示，左右可见部分相邻页面；拖动时页面平滑缩放过渡，当前页面尺寸最大，相邻页面略小

核心问题分析 #

你当前的代码中，HorizontalPager默认采用占满屏幕的页面尺寸，且未配置内容内边距和页面动画逻辑，导致无法实现预期的露出相邻页面+缩放交互效果。之前尝试的PageSize、ContentPaddings参数未生效，大概率是用法不正确或未配合动画逻辑。

修改后的完整代码 #

@Composable
fun LoadingScreen() {
    val state = rememberPagerState(pageCount = { 3 })
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = AppColor)
            .padding(12.dp)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 固定页面宽度，留出左右空间显示相邻页面
        val pageWidth = 240.dp
        val screenWidth = LocalConfiguration.current.screenWidthDp.dp
        val horizontalPadding = (screenWidth - pageWidth) / 2

        HorizontalPager(
            state = state,
            beyondBoundsPageCount = 2,
            // 设置左右内边距，让页面居中并露出相邻页
            contentPadding = PaddingValues(horizontal = horizontalPadding),
            // 固定页面尺寸，不占满屏幕
            pageSize = PageSize.Fixed(pageWidth),
            modifier = Modifier.fillMaxWidth()
        ) { page ->
            // 计算当前页面的偏移量，用于缩放动画
            val pageOffset = calculateCurrentOffsetForPage(page, state)
            val scale = lerp(0.85f, 1f, 1f - pageOffset.coerceIn(0f, 1f))

            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier
                        .size(240.dp * scale)
                        .clip(RoundedCornerShape(12.dp))
                        .background(
                            brush = Brush.verticalGradient(
                                listOf(
                                    Color(0xFFFFFFFF),
                                    Color(0x00FFFFFF)
                                )
                            )
                        ),
                    contentAlignment = Alignment.Center
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.rafiki),
                        contentDescription = "Slider",
                        modifier = Modifier.fillMaxSize(),
                        contentScale = ContentScale.Crop
                    )
                }
                Text(
                    modifier = Modifier.padding(5.dp),
                    text = "FOOD",
                    style = MaterialTheme.typography.NormalText.copy(
                        fontSize = 20.sp * scale,
                        fontWeight = FontWeight.ExtraBold,
                        color = Color.White
                    )
                )
            }
        }
    }
}

// 计算页面偏移量的工具函数
private fun calculateCurrentOffsetForPage(page: Int, pagerState: PagerState): Float {
    return ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
}

关键修改说明 #

• 页面布局配置：通过contentPadding设置左右内边距，配合PageSize.Fixed固定页面宽度，让页面居中且露出左右相邻页面的部分内容。
• 缩放动画逻辑：利用PagerState的currentPage和currentPageOffsetFraction计算每个页面的偏移比例，通过lerp函数实现当前页面1倍大小、相邻页面0.85倍大小的平滑缩放过渡。
• 图片适配优化：给Image添加contentScale = ContentScale.Crop，避免页面缩放时图片出现拉伸变形。

调整建议 #

• 若需要修改相邻页面的露出宽度，直接调整pageWidth的值即可，horizontalPadding会自动适配屏幕宽度计算内边距。
• 缩放比例可根据需求修改lerp函数的0.85f（最小缩放）和1f（最大缩放）参数。

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