I am trying to have a checkbox with some trailing text. The idea is that whether you select the checkbox itself, or the text, the value is toggled. For brevity in code I've done everything in the composable.
It works as expected when selecting the text. But when I specifically press the checkbox, nothing happens. I see the ripple effect from pressing the checkbox but it is obviously ignoring the row's clickable function and hitting onCheckChange = {}
I'm not entirely fluent in composable scopes so I thought it might be due to Row()
being an inline function so I tried applying the same modifier to the Surface
but that doesn't work either.
It isn't a big deal having the same call from the 2 spots, I would just like to know why.
@Composable
fun CheckboxInRowWithText() {
var checkedState by remember { mutableStateOf(false) }
Surface {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
checkedState = !checkedState
},
verticalAlignment = Alignment.CenterVertically) {
Checkbox(checked = checkedState, onCheckedChange = {} )
Text(text = "Clicking this Row will toggle checkbox")
}
}
}
The reason you can't click an ancestor Composable is not because it's under another, touch propagation goes from descendant to ancestor by default because of PointerEventPass which is Main.
The reason Modifier.clickable doesn't allow parent to get event is, it calls
PointerEventChange.consume
but you can write your own click functions to propagate from child to parent or parent to child or consume conditionally.You can check out this answer for more details
You are basically doing nothing on checkBoxChange that's why it doesn't change, set checkedState inside
onCheckedChange
.Also you can build it like this which will show ripple even when you click CheckBox.
Result
Click propagation sample
You can click below a Composable even with a
Button
which is aSurface
withModifier.clickable
under the hood.Let's create our own custom touch only for the parent below
Button
And assign it to parent with PointerEventPass.Initial with no consume call and will result as