一起滚动两个惰性滚动器

Question

这个问题以前有人问过，但是形式不同，针对一些具体的用例，到目前为止还没有答案。我终于让它工作了，所以我在这里分享这个，但这不应该被标记为重复，因为之前所有的问题都指定了特定的东西，比如 Columns 和 scrollable Modifiers，或者LazyRows，但这通常会解决所有问题，我的意思是所有惰性滚动器，甚至希望一般的可滚动容器。我会 post 回答，所以这只是我希望与社区分享的知识，当然，欢迎任何改进。

Answer 1

这是完整的工作解决方案：-

@Composable
fun DUME() {

    val stateRowX = rememberLazyListState() // State for the first Row, X
    val stateRowY = rememberLazyListState() // State for the second Row, Y

    Column { // Placing two Lazy Rows one above the other for the example

        LazyRow(state = stateRowY) {
            items(LoremIpsum(10).values.toList()) {
                Text(it)
            }
        }

        LazyRow(state = stateRowX) {
            items(LoremIpsum(10).values.toList()) {
                Text(text = it)
            }
        }

    }

    //This might seem crazy

    LaunchedEffect(stateRowX.firstVisibleItemScrollOffset) {
        stateRowY.scrollToItem(
            stateRowX.firstVisibleItemIndex,
            stateRowX.firstVisibleItemScrollOffset
        )
    }

    LaunchedEffect(stateRowY.firstVisibleItemScrollOffset) {
        stateRowX.scrollToItem(
            stateRowY.firstVisibleItemIndex,
            stateRowY.firstVisibleItemScrollOffset
        )
    }
}

这里的 items 导入是：androidx.compose.foundation.lazy.items，它接受一个列表而不是数字（大小）。

Answer 2

Richard 的上述回答很好，但它在滚动时会产生滞后，因为它会创建循环，如 Ivan 所述。这个问题的解决方案很简单

LaunchedEffect(stateRowX.firstVisibleItemScrollOffset) {
    if (!stateRowY.isScrollInProgress) {
        stateRowY.scrollToItem(
            stateRowX.firstVisibleItemIndex,
            stateRowX.firstVisibleItemScrollOffset
        )
    }
}

LaunchedEffect(stateRowY.firstVisibleItemScrollOffset) {
    if (!stateRowX.isScrollInProgress) {
        stateRowX.scrollToItem(
            stateRowY.firstVisibleItemIndex,
            stateRowY.firstVisibleItemScrollOffset
        )
    }
}

现在滚动时不会卡顿了。