Início / coding / Perguntas / 79426230
Accepted
Ali Asjad
Asked: 2025-02-10 14:25:56 +0800 CST

Como consumir completamente eventos de toque no Jetpack Compose para evitar cliques de crianças?

  • 772

Estou tentando interceptar e consumir todos os eventos de clique no nível pai no Jetpack Compose para que os composables filhos (como um Button) não recebam cliques. No entanto, mesmo depois de chamar consuma() em awaitPointerEventScope, o filho ainda recebe o evento de clique.

Aqui está meu código:

@Composable
fun ParentConsumesClick() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent()
                        Log.d("Click", "Consumed in Parent")
                        event.changes.forEach { it.consume() } // Consume touch event
                    }
                }
            }
            .background(Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = { Log.d("Click", "Child clicked") }) {
            Text("Click Me")
        }
    }
}

Comportamento esperado:

  • Clicar em qualquer lugar dentro da caixa deve registrar "Consumed in Parent".
  • O botão interno não deve receber nenhum clique (ou seja, "Child clicked"não deve ser registrado).

Comportamento real:

  • "Consumed in Parent"é registrado (mostrando que o pai recebe o evento).
  • Mas o Botão ainda recebe o evento de clique e registra "Child clicked".

1 respostas

  1. Best Answer

    Você precisa consumir o evento inativo para que o Modificador ou Botão clicável não receba eventos de clique.

    Além disso, como os gestos se propagam do filho para o pai, você precisa alterar o passe de Principal para Inicial para que o pai receba o toque primeiro.

    Você pode conferir esta resposta para mais detalhes sobre como o sistema de gestos funciona no Jetpack Compose.

    Crie um modificador como

    private fun Modifier.customTouch(
    pass: PointerEventPass,
    onDown: () -> Unit = {},
    onUp: () -> Unit = {}
) = this.then(
    Modifier.pointerInput(pass) {
        awaitEachGesture {
            val down = awaitFirstDown(pass = pass)
            down.consume()
            onDown()
           val up = waitForUpOrCancellation(pass)
            if (up != null) {
                onUp()
            }
        }
    }
)

    E aplique este modificador ao pai, como

    @Preview
@Composable
fun ParentConsumesClick() {

    val context = LocalContext.current
    Box(
        modifier = Modifier
            .fillMaxSize()
            .customTouch(
                pass = PointerEventPass.Initial,
                onDown = {
                    Toast
                        .makeText(context, "Parent Touched", Toast.LENGTH_SHORT)
                        .show()
                },
                onUp = {
                    Toast
                        .makeText(context, "Parent Up", Toast.LENGTH_SHORT)
                        .show()
                }
            )
            .background(Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = {
            Toast.makeText(context, "Child clicked", Toast.LENGTH_SHORT).show()
        }) {
            Text("Click Me")
        }
    }
}

    Além disso, se você quiser aplicar ondulação neste clique, você pode adicionar InteractionSouce e Modifier.indication.

    • 1

relate perguntas