如何使用 Jetpack Compose 创建多选网格？

Question

我想创建类似于 Google 表单的 MultiChoiceGrid， 每个选项的顶部都有列标题，前面有问题的 RadioButton 行，但不知道该怎么做。

谁能给我一个例子，或者有什么布局吗？

Form that I want

Answer 1

要存储选择状态，您可以使用MutableListState，在state documentation 中查看更多信息

要显示它 - LazyVerticalGrid，请在 lists documentation 中查看更多信息

val selectionState = remember {
    List(100) { false }
        .toMutableStateList()
}
LazyVerticalGrid(cells = GridCells.Fixed(10)) {
    itemsIndexed(selectionState) { i, selected ->
        Checkbox(
            checked = selected,
            onCheckedChange = { selectionState[i] = it },
            colors = CheckboxDefaults.colors(checkmarkColor = Color.Blue)
        )
    }
}

---

如果你想为列/行添加标题，你可以在里面添加更多的项目，你只需仔细计算=）

val columnTitles = List(4) { "Column $it" }
val rowTitles = List(10) { "Player $it" }
val rowTitleWidth = 50.dp
val selectionState = remember {
    List(rowTitles.count()) {
        List(columnTitles.count()) { false }
            .toMutableStateList()
    }.toMutableStateList()
}
LazyVerticalGrid(cells = GridCells.Fixed(columnTitles.count() + 1)) {
    item {
        // top left empty cell
        Spacer(modifier = Modifier.width(rowTitleWidth))
    }
    items(columnTitles) { columnTitle ->
        Text(columnTitle)
    }
    rowTitles.forEachIndexed { i, rowTitle ->
        item {
            Box(
                modifier = Modifier
                    .width(rowTitleWidth)
            ) {
                Text(
                    rowTitle,
                )
            }
        }
        items(columnTitles.count()) { j ->
            Checkbox(
                checked = selectionState[i][j],
                onCheckedChange = { selectionState[i][j] = it },
                colors = CheckboxDefaults.colors(checkmarkColor = Color.Blue),
            )
        }
    }
}