Jetpack Compose：如何设置HorizontalPager单页面宽度为屏幕70%？

数据老陈

2026-7-1

解决Jetpack Compose HorizontalPager单页面宽度设置问题

要实现单个页面宽度为屏幕70%、高度占满可用空间的效果，你需要调整HorizontalPager的pageSize参数，而非直接给HorizontalPager设置宽度。具体修改如下：

将pageSize从PageSize.Fill改为PageSize.Fraction(0.7f)，这会让每个页面的宽度占父容器宽度的70%
调整contentPadding，让页面在水平方向居中显示，避免页面贴边
确保页面内的Card使用fillMaxHeight()来占满垂直空间（因为PageSize.Fraction只控制宽度）

修改后的完整代码：

HorizontalPager(
    state = pagerState,
    pageSize = PageSize.Fraction(0.7f), // 设置单页宽度为父容器的70%
    contentPadding = PaddingValues(horizontal = (LocalConfiguration.current.screenWidthDp * 0.15f).dp) // 左右各留15%空间，让页面居中
) { page ->
    val media = mediaList[page]
    Card(
        modifier = Modifier
            .fillMaxHeight() // 高度占满可用空间
            .graphicsLayer {
                val pageOffset = (
                        (pagerState.currentPage - page) + pagerState
                            .currentPageOffsetFraction
                        ).absoluteValue
                alpha = lerp(
                    start = 0.5f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
            }
    ) {
        AsyncImage(
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
            model = ImageRequest.Builder(context)
                .data(media.uri)
                .crossfade(true)
                .build(),
            contentDescription = null
        )
    }
}