スティッキー行(それ自体に列が含まれている)と各行のスティッキー最初の列を持つテーブルを作成しようとしています。テーブルが提示する必要のあるデータの量が原因で、通常の列と行を使用するという私の考えを放棄し、代わりに 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 をスクロールするにはどうすればよいですか? それは可能ですか?現在の実装アプローチを放棄して、別の方法を見つける必要がありますか? もしそうなら、どこから始めますか?オンラインで利用できるグリッド ソリューションは、一方向のスクロールのみを解決し、添付の写真のように目的のスティッキー動作を作成することができませんでした...助けてください!