LazyHorizontalSgaggeredGrid испортил порядок предметов ⇐ Android

[Anonymous]

Я пытаюсь отображать простой временной столик в Jetpack Compose на Android. Некоторые лекции имеют различное количество выделенных блоков, поэтому я решил использовать LazyHorizontalSgaggeredGrid < /code>, потому что ширина элементов будет отличаться, но высоты останутся прежними. < /P>
Следующее изображение показывает, как таблица времени должна выглядеть. src = "https://i.sstatic.net/wpr9oly8.png"/>
Когда первый элемент с другой шириной, чем остальная часть добавляется в временной таблице, он испортит порядок всех элементов, которые появляются после его полностью. Следующее изображение показывает проблему около 14:00 Часовая отметка на эмуляторе Android.

Код довольно прост. Я определяю плоский список элементов, указывающих все элементы в одном столбце, прежде чем перейти на следующий столбец. Затем я отправляю этот список в композицию , который определяет LazyHorizontalSgaggeredGrid . И, наконец, каждый элемент отображается с помощью композиции TableCell , который является просто ячейкой с различной шириной, основанной на количестве блоков , выделил субъект.

Код: Выделить всё

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MaterialTheme {
TimeTable(defaultCells)
}
}
}
}

private class Cell(
val text: String,
val blocks: Int = 2,
val bgColor: Color = Color.White,
val textColor: Color = Color.Black,
)

private fun empty(blocks: Int = 1) = Cell(
blocks = blocks,
text = "",
)

private fun header(value: String, blocks: Int = 1) = Cell(
blocks = blocks,
text = value,
bgColor = Color(153, 153, 153),
textColor = Color.White,
)

enum class SubjectColor(val bg: Color, val text: Color) {
RED(Color(234, 153, 153), Color.White),
BLUE(Color(207, 226, 243), Color.Black),
}

private fun subject(name: String, blocks: Int = 2, color: SubjectColor = SubjectColor.RED) = Cell(
blocks = blocks,
text = name,
bgColor = color.bg,
textColor = color.text,
)

private val defaultCells: List
get() = listOf(
empty(),
header("MO"),
header("TU"),
header("WE"),
header("TH"),
header("FR"),

header("08:00", blocks = 2),
empty(2),
empty(2),
subject("Subject 1"),
empty(2),
empty(2),

header("10:00", blocks = 2),
empty(2),
empty(2),
subject("Subject 1", color = BLUE),
subject("Subject 2"),
empty(2),

header("12:00", blocks = 2),
subject("Subject 3", blocks = 3),
subject("Subject 4"),
subject("Subject 5"),
empty(2),
empty(2),

header("14:00", blocks = 2),
empty(),
subject("Subject 2", color = BLUE),
subject("Subject 3", color = BLUE),
subject("Subject 4", blocks = 3, color = BLUE),
subject("Subject 6"),

header("16:00", blocks = 2),
subject("Subject 5", color = BLUE),
subject("Subject 7"),
subject("Subject 7", color = BLUE),
empty(),
subject("Subject 6", color = BLUE),
)

@Composable
private fun TimeTable(
cells: List,
rows: Int = 6,
) {
LazyHorizontalStaggeredGrid(
rows = StaggeredGridCells.Fixed(rows),
modifier = Modifier.fillMaxSize(),
) {
items(cells) { cell ->
TableCell(cell)
}
}
}

@Composable
private fun TableCell(
cell: Cell,
blockWidth: Dp = 100.dp,
rowHeight: Dp = 50.dp,
) {
Box(
modifier = Modifier
.size(blockWidth * cell.blocks, rowHeight)
.background(color = cell.bgColor)
.border(width = 2.dp, color = Color.Black)
,
) {
Text(
modifier = Modifier
.align(Alignment.Center)
,
text = cell.text,
color = cell.textColor,
)
}
}

Я полагаю, что конфигурация сетки по умолчанию помещает пустой блок после субъекта 3 на понедельник в во вторник , потому что он пытается соответствовать ширине самого длинного ряда. Список и не зависит от ширины визуализированных элементов.
Может быть, другой вид композиции помог бы мне здесь, но мне нужна функциональность «унифицированной» прокрутки ( Rows не прокручиваясь самостоятельно ), так что что -то вроде колонки с кодолсом код

Подробнее здесь: https://stackoverflow.com/questions/797 ... r-of-items