Jetpack Compose Horizontal Pager Indicator点击跳转异常求助

问题描述 #

使用HorizontalPager展示项目，搭配Accompanist的HorizontalPagerIndicator实现页面指示器时出现点击跳转异常：4个页面场景下，首次点击第0、1个指示器可正常跳转至对应页面，但再次点击第0个指示器时，页面会跳转到第2页，无法正确定位点击的指示器位置。

错误原因 #

1. 直接给整个HorizontalPagerIndicator添加clickable修饰符，无法捕获具体点击的是哪个指示器项
2. 当前点击逻辑是固定跳转至下一页（当前页+1，最后一页回到0），完全没有根据点击的指示器索引来跳转页面

修复方案 #

通过HorizontalPagerIndicator的indicatorItem参数自定义每个指示器项，给每个项单独添加点击事件，获取点击的索引后直接跳转至对应页面。

修改后的代码 #

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerWithIndicators(deals: List<Deal>) {
    val pagerState = rememberPagerState()
    val coroutineScope = rememberCoroutineScope()
    
    Column {
        HorizontalPager(
            pageCount = deals.size,
            state = pagerState,
            contentPadding = PaddingValues(horizontal = 20.dp),
            pageSpacing = 10.dp
        ) { page ->
            Column {
                DisplayDeal(deal = deals[page])

                Box(
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .padding(top = 10.dp, bottom = 10.dp)
                ) {
                    HorizontalPagerIndicator(
                        pageCount = deals.size,
                        pagerState = pagerState,
                        modifier = Modifier.align(Alignment.Center),
                        // 自定义每个指示器项，添加点击事件
                        indicatorItem = { index, isSelected ->
                            val color = if (isSelected) Color.Blue else Color.Gray
                            val size = if (isSelected) 12.dp else 8.dp
                            
                            Box(
                                modifier = Modifier
                                    .size(size)
                                    .clip(CircleShape)
                                    .background(color)
                                    .clickable {
                                        coroutineScope.launch {
                                            pagerState.animateScrollToPage(index)
                                        }
                                    }
                            )
                        }
                    )
                }
            }
        }
    }
}

说明 #

• 通过indicatorItem自定义每个指示器的样式和点击事件，点击时直接使用当前索引index调用animateScrollToPage跳转，确保点击哪个指示器就跳转到对应页面
• 保留了原有的选中/未选中样式逻辑（颜色和大小），你可以根据需求调整样式细节

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