Jetpack Compose中滑动HorizontalPagerIndicator时应用崩溃排查

核心原因 #

• 你将HorizontalPagerIndicator放在了HorizontalPager的内容lambda内部，而这个lambda负责渲染每一页的内容。这意味着每切换一页，都会新建一个HorizontalPagerIndicator，旧的实例则被销毁。
• 结合崩溃栈信息，LazyColumn的预加载机制（LazyLayoutPrefetcher）在处理这种重复创建、销毁Indicator的场景时，触发了Compose布局系统的内部检查失败（IllegalStateException: Check failed），本质是子组件生命周期与Pager页面生命周期不匹配，导致预加载逻辑冲突。

修复代码 #

将HorizontalPagerIndicator从HorizontalPager的内容lambda中移出，与HorizontalPager同级放在外层Box内，这样Indicator只会被创建一次，生命周期与Pager保持一致：

item {
    Box {
        HorizontalPager(
            modifier = Modifier
                .height(200.dp),
            count = pages.size,
            state = pagerState,
            verticalAlignment = Alignment.Top
        ) { position ->
            ImagesScreen(media = pages[position])
        }
        
        // 移至此处，与HorizontalPager同级
        HorizontalPagerIndicator(
            pagerState = pagerState,
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 10.dp)
        )
    }
}

补充说明 #

• HorizontalPager的内容lambda仅用于提供单页专属内容，全局共享的元素（如页面指示器）必须放在Pager外部，避免重复创建带来的性能损耗与生命周期问题。

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