0

スティッキー行(それ自体に列が含まれている)と各行のスティッキー最初の列を持つテーブルを作成しようとしています。テーブルが提示する必要のあるデータの量が原因で、通常の列と行を使用するという私の考えを放棄し、代わりに Lazy バージョンに注意を向けなければなりませんでした。

テーブルの一般的なレイアウト

一般的なレイアウトが機能し、垂直スクロールが正しく動作するようになりました。ただし、現在、すべての行が個別にスクロールされています...

個々の行をスクロールしています... ヘッダー行をスクロールしています...

この動作を実現するコードを添付しました (それを平坦化し、1 つの「セクション」のみを表示しました。このコードは、一緒にスクロールする必要がある新しい垂直ヘッダー/行のグループごとに繰り返されるという考えです)

MdcTheme {
    LazyColumn(Modifier.background(color = colorResource(abc.testing.core.R.color.background_color)).fillMaxSize()) {
        stickyHeader {
            ComposeColumn {
                Text(
                    modifier = Modifier
                        .background(Color.Blue)
                        .padding(8.dp)
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    color = Color.White,
                    text = "Header Vertical"
                )
                LazyRow {
                    stickyHeader {
                        Text(
                            modifier = Modifier
                                .background(Color.Blue)
                                .padding(8.dp)
                                .width(100.dp)
                                .height(50.dp),
                            textAlign = TextAlign.Center,
                            color = Color.White,
                            text = "Header"
                        )
                    }

                    itemsIndexed(listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17")) { index, column ->
                        Text(
                            modifier = Modifier
                                .background(Color.Blue)
                                .padding(8.dp)
                                .width(100.dp)
                                .height(50.dp),
                            textAlign = TextAlign.Center,
                            color = Color.White,
                            text = "Header Column = $column"
                        )
                    }
                }
            }
        }

        itemsIndexed(listOf("1", "2")) { index, row ->
            LazyRow {
                stickyHeader {
                    Text(
                        modifier = Modifier
                            .background(Color.Blue)
                            .padding(8.dp)
                            .width(100.dp)
                            .height(100.dp),
                        textAlign = TextAlign.Center,
                        color = Color.White,
                        text = "Header"
                    )
                }

                itemsIndexed(listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17")) { index, column ->
                    Text(
                        modifier = Modifier
                            .padding(8.dp)
                            .background(Color.Red)
                            .width(100.dp)
                            .height(100.dp),
                        textAlign = TextAlign.Center,
                        color = Color.White,
                        text = "Row $row Column = $column"
                    )
                }
            }
        }
    }
}

Compose を使用して、他の LazyRows のいずれかが最初にロードされたときに同じ位置で開始するだけでなく、他の LazyRows のいずれかがスクロールするときに各 LazyRow をスクロールするにはどうすればよいですか? それは可能ですか?現在の実装アプローチを放棄して、別の方法を見つける必要がありますか? もしそうなら、どこから始めますか?オンラインで利用できるグリッド ソリューションは、一方向のスクロールのみを解決し、添付の写真のように目的のスティッキー動作を作成することができませんでした...助けてください!

4

0 に答える 0