如何在Jetpack Compose的LazyRow中无重组访问firstVisibleItemIndex？

我需要在Jetpack Compose的LazyRow布局子项中，基于可见数据子集计算最大值，要求读取firstVisibleItemIndex时不会触发不必要的重组。当前代码中直接在子项里读取scrollState.firstVisibleItemIndex会导致滚动时所有子项都重组，希望解决这个问题。

原代码如下：

@Composable
fun TestComposable(modifier: Modifier = Modifier) {
    val scrollState = rememberLazyListState()

    val dataList = mutableListOf<Int>().apply {
        repeat(100) {
            add((0..100).random())
        }
    }
    val windowSize = 4

    LazyRow(
        state = scrollState
    ) {
        itemsIndexed(dataList,
            key = { index, item -> index }) { index, item ->
            val firstIndex = scrollState.firstVisibleItemIndex // <-- 该可观察State会触发重组

            val endIndex = firstIndex + windowSize
            val lastIndex = if (endIndex > dataList.size - 1)
                dataList.size - 1
            else
                endIndex
            val max = dataList
                .subList(firstIndex, lastIndex) // 简化处理，直接用subList
                .max()

            Text(max.toString())
        }
    }
}

解决方案：将最大值计算逻辑移到子项外部，控制重组触发时机 #

核心思路是避免在子项的可组合lambda中直接读取scrollState.firstVisibleItemIndex，而是把最大值计算逻辑提取到外部，通过派生状态或手动监听的方式，仅在必要时更新状态，从而减少不必要的重组。

方案一：使用derivedStateOf创建派生状态

derivedStateOf会跟踪依赖的State变化，仅当计算结果改变时才通知更新，能有效减少重组次数。

@Composable
fun TestComposable(modifier: Modifier = Modifier) {
    val scrollState = rememberLazyListState()

    val dataList = mutableListOf<Int>().apply {
        repeat(100) {
            add((0..100).random())
        }
    }
    val windowSize = 4

    // 用derivedStateOf计算当前可见窗口的最大值
    val visibleWindowMax by remember(scrollState, dataList, windowSize) {
        derivedStateOf {
            val firstIndex = scrollState.firstVisibleItemIndex
            val endIndex = firstIndex + windowSize
            val lastIndex = minOf(endIndex, dataList.size - 1)
            // 处理空窗口边界情况，避免异常
            if (firstIndex > lastIndex) 0
            else dataList.subList(firstIndex, lastIndex + 1).max() ?: 0
        }
    }

    LazyRow(
        state = scrollState
    ) {
        itemsIndexed(dataList, key = { index, item -> index }) { index, item ->
            // 仅当max值变化时，Text才会触发重组
            Text(visibleWindowMax.toString())
        }
    }
}

方案二：用LaunchedEffect+snapshotFlow手动控制更新

如果需要更精细地控制更新时机，可以通过监听滚动状态变化，仅当最大值真正改变时才更新状态：

@Composable
fun TestComposable(modifier: Modifier = Modifier) {
    val scrollState = rememberLazyListState()
    val dataList = mutableListOf<Int>().apply {
        repeat(100) {
            add((0..100).random())
        }
    }
    val windowSize = 4
    val visibleWindowMax = remember { mutableStateOf(0) }

    LaunchedEffect(scrollState) {
        // 收集firstVisibleItemIndex的变化流
        snapshotFlow { scrollState.firstVisibleItemIndex }
            .collect { firstIndex ->
                val endIndex = firstIndex + windowSize
                val lastIndex = minOf(endIndex, dataList.size - 1)
                val newMax = if (firstIndex > lastIndex) 0 else dataList.subList(firstIndex, lastIndex + 1).max() ?: 0
                // 仅当新值与旧值不同时才更新，避免无意义的重组
                if (newMax != visibleWindowMax.value) {
                    visibleWindowMax.value = newMax
                }
            }
    }

    LazyRow(state = scrollState) {
        itemsIndexed(dataList, key = { index, item -> index }) { index, item ->
            Text(visibleWindowMax.value.toString())
        }
    }
}

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