Mark Murphy
09/27/2020, 6:44 PMRadioButtonSample()
from the SDK:
@Composable
fun RadioGroupSample() {
val radioOptions = listOf("Calls", "Missed", "Friends")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
Column {
radioOptions.forEach { text ->
Row(Modifier
.fillMaxWidth()
.preferredHeight(56.dp)
.selectable(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
Text(
text = text,
style = MaterialTheme.typography.body1.merge(),
modifier = Modifier.padding(start = 16.dp)
)
}
}
}
}
It works, including changing the checked state of the RadioButton()
widgets on click events.
This is a refactored version of that sample, pulling the Row()
declaration out into a local function:
@Composable
fun RadioGroupSample() {
val radioOptions = listOf("Calls", "Missed", "Friends")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
@Composable
fun RadioRow(text: String) {
Row(Modifier
.fillMaxWidth()
.preferredHeight(56.dp)
.selectable(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
Text(
text = text,
style = MaterialTheme.typography.body1.merge(),
modifier = Modifier.padding(start = 16.dp)
)
}
}
Column {
radioOptions.forEach { text -> RadioRow(text) }
}
}
It compiles and renders, but the RadioRow()
widgets do not get recomposed when the state changes.Adam Powell
09/27/2020, 7:30 PMMark Murphy
09/27/2020, 7:37 PM