LazyColumn中多LazyRow联动滚动的首次点击失效问题

问题场景 #

LazyColumn包含两部分核心区域：

• 顶部固定的横向滚动LazyRow（商品项区域）
• 底部多个可展开/收起的功能模块，展开后显示横向滚动的LazyRow

已实现两个横向区域的滚动同步，但出现异常：滚动任一横向LazyRow后，首次点击展开/收起按钮无响应，后续点击可正常触发。

代码示例 #

val pos = remember() {
    mutableIntStateOf(0)
}
val scope = rememberCoroutineScope()

val productScroll = rememberLazyListState()
val featureScroll = rememberLazyListState()

LazyColumn() {
    stickyHeader {
        LazyRow(modifier = Modifier.wrapContentSize(), state = productScroll) {
            println("SCROLLLL 1")
            items(20) { index ->
                Column(
                    modifier = Modifier
                        .size(100.dp)
                        .background(color = Color.Green)
                ) {
                    Text("item ", color = Color.Red)
                    Text("$index")
                }
            }
        }
    }
    itemsIndexed(dataList.value?: emptyList()) { index, item ->
        HeaderSection(item.header, item.isScroll, onHeaderClick = {
            pos.intValue=index
        })
        if (pos.intValue==index) {
            SectionBody(item, featureScroll)
        }
    }
}

LaunchedEffect(key1 = featureScroll.firstVisibleItemScrollOffset) {
    scope.launch {
        productScroll.scrollToItem(
            featureScroll.firstVisibleItemIndex,
            featureScroll.firstVisibleItemScrollOffset
        )
    }
}

LaunchedEffect(key1 = productScroll.firstVisibleItemScrollOffset) {
    scope.launch {
        featureScroll.scrollToItem(
            productScroll.firstVisibleItemIndex,
            productScroll.firstVisibleItemScrollOffset
        )
    }
}

问题截图 #

原因分析 #

1. 滚动同步逻辑过于频繁：原代码仅监听firstVisibleItemScrollOffset，滚动过程中该值会持续变化，导致LaunchedEffect不断触发协程执行scrollToItem，频繁的滚动操作会抢占触摸事件的处理优先级，首次点击的事件被滚动操作干扰，无法正常触发。
2. 无差别的滚动触发：即使两个LazyRow的滚动位置已经一致，代码仍会重复执行滚动操作，加剧了事件冲突。
3. 点击回调不稳定：HeaderSection的onHeaderClick每次重组都会生成新的lambda，可能导致点击事件在重组过程中被吞掉。

解决方案 #

1. 优化滚动同步逻辑 #

• 同时监听firstVisibleItemIndex和firstVisibleItemScrollOffset，确保只有在位置不一致时才执行同步
• 使用animateScrollToItem替代scrollToItem，滚动更平滑，减少对触摸事件的抢占

修改后的滚动同步代码：

// 同步功能项区域滚动到顶部商品区域
LaunchedEffect(featureScroll.firstVisibleItemIndex, featureScroll.firstVisibleItemScrollOffset) {
    if (productScroll.firstVisibleItemIndex != featureScroll.firstVisibleItemIndex ||
        productScroll.firstVisibleItemScrollOffset != featureScroll.firstVisibleItemScrollOffset
    ) {
        productScroll.animateScrollToItem(
            featureScroll.firstVisibleItemIndex,
            featureScroll.firstVisibleItemScrollOffset
        )
    }
}

// 同步顶部商品区域滚动到功能项区域
LaunchedEffect(productScroll.firstVisibleItemIndex, productScroll.firstVisibleItemScrollOffset) {
    if (featureScroll.firstVisibleItemIndex != productScroll.firstVisibleItemIndex ||
        featureScroll.firstVisibleItemScrollOffset != productScroll.firstVisibleItemScrollOffset
    ) {
        featureScroll.animateScrollToItem(
            productScroll.firstVisibleItemIndex,
            productScroll.firstVisibleItemScrollOffset
        )
    }
}

2. 稳定点击回调 #

给onHeaderClick添加remember包裹，避免每次重组生成新的lambda，确保点击事件的稳定性：

itemsIndexed(dataList.value?: emptyList()) { index, item ->
    HeaderSection(
        item.header, 
        item.isScroll, 
        onHeaderClick = remember(index) {
            { pos.intValue = index }
        }
    )
    if (pos.intValue == index) {
        SectionBody(item, featureScroll)
    }
}

3. 额外优化：移除冗余协程嵌套 #

原代码在LaunchedEffect内嵌套启动scope.launch，但LaunchedEffect本身已处于协程上下文，无需额外嵌套，直接执行滚动操作即可：

LaunchedEffect(featureScroll.firstVisibleItemIndex, featureScroll.firstVisibleItemScrollOffset) {
    if (productScroll.firstVisibleItemIndex != featureScroll.firstVisibleItemIndex ||
        productScroll.firstVisibleItemScrollOffset != featureScroll.firstVisibleItemScrollOffset
    ) {
        productScroll.animateScrollToItem(
            featureScroll.firstVisibleItemIndex,
            featureScroll.firstVisibleItemScrollOffset
        )
    }
}

总结 #

通过限制滚动同步的触发条件、使用平滑滚动、稳定点击回调这三点优化，即可解决滚动后首次点击无响应的问题。

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