如何修复Compose自动轮播Banner的并发状态变更崩溃问题？

崩溃Unsupported concurrent change during composition的核心原因是State对象在组合阶段和组合外部被同时修改，结合你的代码，主要触发点有三个：

1. sliderItemPromoForEvent在HorizontalPager的item组合块中直接赋值，同时在LaunchedEffect中又修改它，导致并发冲突。
2. onGloballyPositioned回调中直接修改isVisibleFlow.value，而该回调可能在组合过程中触发，引发State修改时机错误。
3. 事件发送逻辑的循环触发导致组件高频重组，进一步加剧了State并发修改的概率。

1. 禁止在组合块内直接修改State #

你在HorizontalPager的item中直接修改sliderItemPromoForEvent.value，属于组合过程中修改State的禁忌操作。需将这部分逻辑移到LaunchedEffect中，确保State修改发生在组合完成后。

原错误代码片段：

if (state.currentPage == page) {
    sliderItemPromoForEvent.value = sliderItemPromo.value
}

修改为：

// 单独监听currentPage变化，在LaunchedEffect中更新目标State
LaunchedEffect(state.currentPage) {
    if (sliderItems.isNotEmpty()) {
        val currentItem = sliderItems[state.currentPage] as? SliderBannerItem
        sliderItemPromoForEvent.value = currentItem
    }
}

同时移除Pager item块中对sliderItemPromoForEvent的直接赋值。

2. 重构自动轮播逻辑，避免协程并发冲突 #

原代码中嵌套coroutineScope.launch可能导致多个协程同时修改PagerState，且LaunchedEffect的key包含sliderHoldTimestamp（若频繁变化会导致协程反复重启）。修改后逻辑如下：

const val AUTO_SLIDER_DELAY = 3000.toLong()
val state = rememberPagerState(pageCount = { sliderItems.count() })

LaunchedEffect(state) {
    while (true) {
        delay(AUTO_SLIDER_DELAY)
        if (sliderItems.isEmpty() || state.pageCount == 0) continue
        
        val newPosition = (state.currentPage + 1) % state.pageCount
        // 用launchIn确保滚动操作在当前协程作用域内，避免并发冲突
        state.animateScrollToPage(newPosition).launchIn(this)
    }
}

3. 修正onGloballyPositioned中的State修改时机 #

onGloballyPositioned可能在组合过程中执行，直接修改State会触发异常。改用SnapshotFlow监听布局变化，确保State修改在安全时机：

原错误代码片段：

.onGloballyPositioned { layoutCoordinates ->
    coroutineScope.launch {
        delay(10L)
        val height = layoutCoordinates.boundsInWindow().bottom
        if (height != previousHeight.floatValue) {
            isVisibleFlow.value = calculateIsVisible(layoutCoordinates, screenHeightPx)
            previousHeight.floatValue = height
        }
    }
}

修改为：

.onGloballyPositioned { layoutCoordinates ->
    val scope = rememberCoroutineScope()
    scope.launch {
        SnapshotFlow { layoutCoordinates.boundsInWindow().bottom }
            .distinctUntilChanged()
            .collect { height ->
                isVisibleFlow.value = calculateIsVisible(layoutCoordinates, screenHeightPx)
                previousHeight.floatValue = height
            }
    }
}

4. 终止事件发送的循环触发 #

原逻辑中sliderItemPromoForEvent.value被频繁设置为非null又重置为null，导致组件高频重组。添加状态一致性判断，避免重复触发：

// 直接用LaunchedEffect监听目标State变化，移除组合块中的判断逻辑
LaunchedEffect(sliderItemPromoForEvent.value) {
    val currentItem = sliderItemPromoForEvent.value ?: return@LaunchedEffect
    
    delay(1000L)
    if (isVisibleFlow.value) {
        withContext(Dispatchers.IO) {
            events.invoke(
                PromoSliderEvents.SendViewPromotionEvent(
                    currentItem.redirectUrl.toString(),
                    currentItem.link.toString(),
                    state.currentPage.toString()
                )
            )
        }
    }
    // 仅当当前item与State中保存的一致时才重置，避免覆盖新的item
    if (sliderItemPromoForEvent.value == currentItem) {
        sliderItemPromoForEvent.value = null
    }
}

额外优化建议 #

对于需要在协程中频繁修改的状态（如isVisibleFlow、sliderItemPromoForEvent），建议使用MutableStateFlow替代MutableState，StateFlow更适配协程环境，能更好地控制并发修改：

// 定义为StateFlow
private val _sliderItemPromoForEvent = MutableStateFlow<SliderBannerItem?>(null)
val sliderItemPromoForEvent: StateFlow<SliderBannerItem?> = _sliderItemPromoForEvent

// 修改时通过value赋值
_sliderItemPromoForEvent.value = currentItem

// Compose中用collectAsState观察变化
val currentEventItem by sliderItemPromoForEvent.collectAsState()

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