Jetpack Compose: propagando cliques para camadas inferiores da IU

Com Modifier.clickable ou PointerEventScope.detectTapGestures você não pode propagar gestos para descendente ou pai porque eles chamam PointeEventChange.consume(), você pode verificar esta resposta sobre gestos e propagação de gestos no Jetpack Compose. Mas no seu caso parece que você está tentando propagar um evento para o qual não é possível e um design ruim na minha opinião.

Para qualquer pessoa que queira passar um gesto para o pai e não para o irmão, você pode facilmente escrever um gesto personalizado de detecção para cima e para baixo usando awaitEachGesture.

@Preview
@Composable
private fun GesturePrpoagation() {

    val context = LocalContext.current

    Box(modifier = Modifier
        .fillMaxSize()
        .border(2.dp, Color.Red)
        .pointerInput(Unit) {
//            detectTapGestures {
//                Toast.makeText(context, "Parent tapped", Toast.LENGTH_SHORT).show()
//            }
            awaitEachGesture {
                val down: PointerInputChange = awaitFirstDown()
                val up: PointerInputChange? = waitForUpOrCancellation()
                Toast.makeText(context, "Parent tapped", Toast.LENGTH_SHORT).show()
            }
        }
    ) {

        Box(modifier = Modifier
            .background(Color.Red)
            .fillMaxSize()
            .zIndex(1f)
            .pointerInput(Unit) {
//                detectTapGestures {
//                    Toast.makeText(context, "Box1 tapped", Toast.LENGTH_SHORT).show()
//                }
                awaitEachGesture {
                    val down: PointerInputChange = awaitFirstDown()
                    val up: PointerInputChange? = waitForUpOrCancellation()
                    Toast.makeText(context, "Box1 tapped", Toast.LENGTH_SHORT).show()
                }
            }
        )

        Box(modifier = Modifier
            .background(Color.Black.copy(alpha = .5f))
            .fillMaxSize()
            .zIndex(2f)
            .pointerInput(Unit) {
//                detectTapGestures {
//                    Toast.makeText(context, "Box2 tapped", Toast.LENGTH_SHORT).show()
//                }
                awaitEachGesture {
                    val down: PointerInputChange = awaitFirstDown()
                    val up: PointerInputChange? = waitForUpOrCancellation()
                    Toast.makeText(context, "Box2 tapped", Toast.LENGTH_SHORT).show()
                }
            }
        )
    }
}

Dependendo do zIndex de Box1 e Box2 você verá que o evento será acionado para aquele com zIndex maior, se ambos zero, que é zero por padrão, serão acionados para a segunda caixa e então propagados para o pai. Você pode alterar isso seletivamente consumindo qualquer um deles PointerInputChange.

No caso dos PO, não há necessidade de uma segunda caixa. A camada transparente preta com clipe circular pode ser desenhada usando Modifier.drawWithContent e com base na posição de toque você aciona o evento de clique nesta camada ou em qualquer componente.

Você pode ver que enquanto os gestos de toque são consumidos, a menos que você consuma, os gestos são propagados.

@Preview
@Composable
private fun TouchLayerSample() {

    var isTouched by remember {
        mutableStateOf(false)
    }

    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize()
            .pointerInput(Unit) {
                val size = this.size
                val center = size.center
                detectTapGestures { offset: Offset ->

                    val circleCenter = Offset(
                        x = center.x.toFloat(),
                        y = size.height * .3f
                    )

                    // This is for measuring distance from center of circle to
                    // touch position to invoke only invoke when touch is inside circle
                    isTouched = isTouched(
                        center = circleCenter,
                        touchPosition = offset,
                        radius = 200f
                    )

                    if (isTouched) {
                        Toast.makeText(context, "Circle is touched", Toast.LENGTH_SHORT).show()
                    }

                }
            }
            .drawWithCache {

                val center = this.size.center

                val circlePath = Path().apply {
                    addOval(
                        Rect(
                            center = Offset(
                                x = center.x,
                                y = size.height * .3f
                            ),
                            radius = 200f
                        )
                    )
                }
                onDrawWithContent {
                    drawContent()
                    clipPath(circlePath, clipOp = ClipOp.Difference) {
                        drawRect(SolidColor(Color.Black.copy(alpha = .8f)))
                    }

                }
            }
    ) {

        // This can be any content that is behind transparent black layer.

        // If you have a clickable component here you can use isTouched with custom gesture in previous example to not consume it inside detectTapGesture, so it can be propagated to component. In that case you need to also change PointerEventPass to Initial to propagate from ancestor to descendant.

        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(R.drawable.landscape1),
            contentDescription = null,
            contentScale = ContentScale.FillBounds
        )
    }
}

private fun isTouched(center: Offset, touchPosition: Offset, radius: Float): Boolean {
    return center.minus(touchPosition).getDistanceSquared() < radius * radius
}