android - 2 つのレイジー スクローラーを一緒にスクロールする

Question

この質問は以前に尋ねられましたが、いくつかの特定のユースケースに関してさまざまな形で尋ねられましたが、これまでのところ答えはありません. ようやく機能するようになったので、ここで共有しますが、以前のすべての質問Columnsでscrollable Modifiers、 またはなどの特定のものを指定しているため、これを重複としてマークしないでくださいLazyRows。怠惰なスクローラー、そして願わくば一般的なスクロール可能なコンテナーです。回答を投稿するので、これはコミュニティと共有したい知識の一部にすぎません。また、もちろん、改善は大歓迎です。

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。これは、数値 (サイズ) の代わりにリストを受け入れます。