Clickable box makes its "non-clickable parent box" clickable as well?-CodePudding

Here is the code snippet:

Box(
    Modifier
        .size(48.dp, 48.dp)
        .background(Color.Transparent)
        .align(Alignment.CenterEnd)
)
{
    Box(
        Modifier
            .size(height = 35.636363.dp, width = 41.818181.dp)
            .align(Alignment.CenterEnd)
            .clip(RoundedCornerShape(topStart = 20.dp, bottomStart = 20.dp))
            .clickable(onClick = {showDialogFragment.value = true})
            .background(Color.Red)
    )
}

Whenever i click on parent box (the one which is transparent) it activates click event of its only child. Why so? Current behavior meets my needs, but i dont understand why it happens.

CodePudding user response：

According to Material Guidelines, the minimum touch size is 48.dp.

Since 1.1.0-alpha03, when you add touch detection to a view with a size smaller than this value, tracking will work on the enlarged frame.

Added minimum touch target size to ViewConfiguration for use in semantics and pointer input to ensure accessibility.

Just out of curiosity, you can check the extended touch padding for the current view using pointerInput modifier, which lies under all touch processing in Compose:

.pointerInput(Unit) {
    println("$extendedTouchPadding")
}