Why does my button (which is not showing, since the entire screen is red) react to touches? Is there a way to prevent it? This is a simple example but I have more complex screens where I have some inner "screens" that overlap each other but the fact that clicks get passed through is kinda messing some things up for me.

fun MyScreen(
) {
  val context = LocalContext.current
  Box(Modifier.fillMaxSize().background(Color.Green), contentAlignment = Center) {
    Button(onClick = { Toast.makeText(context, "screen in background clicked", Toast.LENGTH_SHORT).show() }) {
      Text(text = "Bottom")
    }
  }
  Box(Modifier.fillMaxSize().background(Color.Red)) {}
}

huh, I wouldn’t expect that behavior either, but haven’t tried it out in our project. Does it behave the same way if you use a Column or a Row instead of a Box to cover the button?

because it is the same with views. Your red rectangle does not handle touch event, so the event does pass thru. It is expected

Interesting. So I guess the way to get around this is to have a dummy unhandled clickable? If so... I wonder if I can just make a custom modifier for that.

Box(
  Modifier
    .fillMaxSize()
    .background(Color.Red)
    .clickable(interactionSource = MutableInteractionSource(), indication = null, onClick = {})) {}

could be, but then it would only handle clicks. All other touches would have the same problem

Oh true. Like scrolls on the green box would still happen. Hm. I wonder if there's any out of the box way to just stop passing events through.

yes, modifier:

.pointerInput(Unit) {}

Or, maybe

Surface

?

ooh. interesting idea. ill give that a try as well.