Entender as fases de rolagem

A rolagem é dividida em várias fases. O delta de entrada é enviado por uma sequência de fases para garantir que cada uma tenha a oportunidade de consumir ou reagir ao movimento.

Durante esse ciclo, o delta de entrada disponível e o delta de entrada consumido são transmitidos em cada etapa. Isso fornece a cada fase o contexto completo necessário para reagir, consumir ou detectar o evento de rolagem.

Um diagrama de ciclo de rolagem mostrando as fases de um evento de rolagem do usuário
Figura 1. Um diagrama de ciclo de rolagem que mostra as fases de um evento de rolagem do usuário.

Como ilustrado na Figura 1, o processo de rolagem segue esta ordem:

  1. Rolagem esticada:recebe primeiro o delta de entrada inicial, o que dá à rolagem esticada a chance de reagir primeiro (por exemplo, relaxando um efeito de alongamento ativo).
  2. Pré-rolagem aninhada:oferece uma oportunidade de reagir ao delta de entrada antes da fase de rolagem. Nessa fase, um delta de entrada pode ser consumido ou apenas monitorado para acionar mudanças na interface, como recolher ou expandir uma barra de apps.
  3. Transformar o delta de entrada: ajusta o sinal do delta de entrada bruto com base na orientação e na direção do layout para garantir um comportamento de rolagem natural. Para mais informações, consulte a seção Transformar delta de entrada.
  4. Rolagem:essa fase recebe o delta de entrada disponível e não consumido, ajustado para corresponder à configuração do contêiner de rolagem. Normalmente, ele usa esse delta para atualizar o próprio deslocamento de rolagem.
  5. Reverter para o delta de entrada bruta: reverte o delta disponível e consumido da fase de rolagem para o sinal de delta de entrada bruta original.
  6. Pós-rolagem aninhada:essa fase reage após a conclusão da fase de rolagem principal, recebendo os deltas disponíveis e consumidos recém-atualizados. Ele pode consumir qualquer entrada disponível restante ou usar o contexto do que acabou de ser consumido.
  7. Rolagem esticada:essa última fase analisa os deltas finais disponíveis e consumidos. Qualquer entrada disponível restante que chegue a esse estágio é normalmente usada para gerar efeitos de borda, como um alongamento ou brilho, indicando que o usuário atingiu o limite da área rolável.

Delta de entrada de transformação

O delta de entrada do ponteiro requer ajustes de sinal nas fases de rolagem para corresponder aos contratos esperados. Antes que o delta chegue à fase de rolagem, os modificadores de rolagem ajustam o delta de entrada com base na orientação, na direção do layout e nos contextos de RTL. Isso acontece porque a entrada bruta rastreia o movimento físico de pixels do ponteiro na tela (por exemplo, mover para baixo aumenta a coordenada Y da tela, gerando um delta positivo). No entanto, para conseguir uma "rolagem natural", em que o conteúdo se move com o dedo, arrastar para baixo significa que a janela de visualização precisa se deslocar para cima sobre o conteúdo, o que corresponde a um deslocamento de rolagem negativo.

As diferenças de entrada de outras fontes de entrada, como uma roda do mouse ou um touchpad, não são transformadas durante as fases de rolagem.

Exemplo: o ponteiro se move para a direita usando Modifier.horizontalScroll()

Um gráfico que mapeia um gesto em que o ponteiro se move para a direita
Figura 2. Um gráfico que mapeia um gesto em que o ponteiro se move para a direita.

Para entender como os deltas são consumidos e transformados, consulte a Figura 2, que mapeia um gesto em que o ponteiro se move para a direita.

  • Pré-rolagem:o gesto começa com um delta de entrada bruta positivo de 100.
    • A rolagem esticada observa isso e consome 10, deixando 90.
    • A pré-rolagem aninhada dá ao componente pai a oportunidade de reagir, consumindo 30. O delta bruto restante é 60.
  • Transformação A: antes de entrar na fase de rolagem, horizontalScroll inverte o delta bruto positivo restante (60) em um delta negativo (-60). Isso garante que a janela de visualização se desloque para a esquerda, de modo que o conteúdo pareça se mover para a direita com o dedo do usuário.
  • Rolagem:o componente rolável de destino consome uma parte desse delta transformado para atualizar o deslocamento de rolagem. Neste exemplo, ele consome -30, deixando -30 sem consumo.
  • Transformação B:o delta de rolagem não consumido (-30) é convertido de volta em um delta bruto positivo (30) para corresponder ao contrato de rolagem aninhada e rolagem esticada.
  • Pós-rolagem:o delta bruto restante é transmitido de volta pelo pipeline.
    • A rolagem aninhada após a rolagem consome 10, deixando 20.
    • O efeito de rolagem esticada usa os 20 finais para gerar efeitos visuais de borda, como um alongamento ou brilho, resolvendo totalmente o delta de entrada para 0.

Referência de transformação delta de entrada do ponteiro

A tabela a seguir descreve como os deltas de entrada são assinados em diferentes fases e direções para entrada de ponteiro.

Delta de entrada bruta Efeito de rolagem Rolagem aninhada scrollableArea com orientação horizontal scrollableArea com orientação horizontal (invertida) scrollableArea com orientação vertical scrollableArea com orientação vertical (invertida)
O ponteiro se move PARA CIMA Negativa Negativa Negativa N/A N/A Positivo Negativa
O ponteiro se move para BAIXO Positivo Positivo Positivo N/A N/A Negativa Positivo
O ponteiro se move para a ESQUERDA Negativa Negativa Negativa Positivo (negativo para RTL) Negativo (positivo para RTL) N/A N/A
O ponteiro se move para a DIREITA Positivo Positivo Positivo Negativo (positivo para RTL) Positivo (negativo para RTL) N/A N/A