Horizontal Pager设置固定宽度后滚动异常求助

当使用PageSize.Fixed时，Pager的滚动边界计算未正确结合contentPadding和pageSpacing，导致最后一项滚动时出现过度拉伸、位置恢复延迟，甚至垂直滚动后无法复位的问题。以下是几种保留固定项宽的解决方法：

方法一：用PageSize.Fraction替代Fixed（推荐） #

通过计算固定宽度占屏幕宽度的比例，用Fraction类型实现等效的固定项宽，同时让Pager正确计算滚动边界：

@Composable
fun DealsPager(
    deals: List<Deal>,
    rentalDuration: String,
    onClickDeal: (Deal) -> Unit
) {
    val pagerState = rememberPagerState()
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    val fixedItemWidth = 282.dp
    // 计算固定宽度占屏幕宽度的比例
    val pageFraction = (fixedItemWidth / screenWidth).value

    HorizontalPager(
        pageCount = deals.size,
        state = pagerState,
        pageSize = PageSize.Fraction(pageFraction),
        pageSpacing = 16.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) {
        DealItem(
            deal = deals[it],
            duration = rentalDuration,
            testTag = "deal list item $it",
            onClick = onClickDeal
        )
    }
}

方法二：自定义PageSize修正边界计算 #

如果Fraction方式无法满足需求，可自定义PageSize类，重写滚动位置计算逻辑，确保最后一项的滚动边界正确：

class FixedItemPageSize(private val itemWidth: Dp) : PageSize {
    override fun calculateMainAxisPageSize(
        availableSpace: Int,
        pageSpacing: Int,
        contentPadding: PaddingValues
    ): Int {
        return with(LocalDensity.current) { itemWidth.roundToPx() }
    }

    override fun calculateMainAxisScrollPosition(
        page: Int,
        pageSize: Int,
        pageSpacing: Int,
        contentPadding: PaddingValues,
        availableSpace: Int
    ): Int {
        val startPadding = contentPadding.calculateStartPadding(LayoutDirection.Ltr).roundToPx()
        val endPadding = contentPadding.calculateEndPadding(LayoutDirection.Ltr).roundToPx()
        // 计算总内容宽度，修正最大滚动值
        val totalContentWidth = startPadding + page * (pageSize + pageSpacing) + pageSize + endPadding
        val maxScroll = maxOf(0, totalContentWidth - availableSpace)
        // 计算当前页的滚动位置，不超过最大滚动值
        val currentScroll = startPadding + page * (pageSize + pageSpacing)
        return minOf(currentScroll, maxScroll)
    }
}

// 使用自定义PageSize
@Composable
fun DealsPager(
    deals: List<Deal>,
    rentalDuration: String,
    onClickDeal: (Deal) -> Unit
) {
    val pagerState = rememberPagerState()

    HorizontalPager(
        pageCount = deals.size,
        state = pagerState,
        pageSize = FixedItemPageSize(282.dp),
        pageSpacing = 16.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) {
        DealItem(
            deal = deals[it],
            duration = rentalDuration,
            testTag = "deal list item $it",
            onClick = onClickDeal
        )
    }
}

方法三：调整布局参数避免冲突 #

如果上述方法仍有问题，可尝试调整contentPadding和pageSpacing的组合，比如将水平内边距改为基于屏幕宽度和固定项宽的动态计算值，减少边界计算的冲突概率。

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