I want to create MultiChoiceGrid that look similar to Google Form, having column header in the top of each choice, and row of RadioButton with question in the front, but don't know how to do it.
Can anyone give me an example, or is there any layout for this?
To store selection state you can use MutableListState, check out more in the state documentation
And to display it - LazyVerticalGrid, check out more in the 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)
)
}
}
If you wanna add titles for columns/rows, you can more items inside, you just calculate carefully =)
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),
)
}
}
}
