Jetpack compose box is not working as expected-CodePudding

I cannot understand how are box working, why when box is covering some layer of our screen, for example we are three boxes

@Composable
fun TestScope() {
     1
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Black)) {
        2
        Box(
            Modifier
                .fillMaxSize()
                .clickable { }
                .background(color = Color.Yellow)
        ) {

        }
         3
        Box(modifier = Modifier
            .fillMaxHeight(0.4f).fillMaxWidth()
            .background(color = Color.Blue)) {

        }
    }
}

If I click on box 3 and only its space I still can click on box 2 which is under it ?

CodePudding user response：

Click events in Compose pass from the top composable to the bottom composable. A Surface composable however prevents this and prevents click events from propagating further down. So when you click on Box 3, the click event is sent down to Box 2. If you place Box 3 inside a Surface, the click event on Box 3 will not go to Box 2.

CodePudding user response：

This is expected. Any composable that does not handle click events is effectively transparent to those click events and can be captured by composables underneath it. This is no different from the view system where you could have a clickable view behind another opaque view - as long as the opaque view does not handle clicks, those go through it to the view underneath.