Información sobre las fases de desplazamiento

El desplazamiento se divide en varias fases. La diferencia de entrada se envía a través de una secuencia de fases para garantizar que cada fase tenga la oportunidad de consumir el movimiento o reaccionar a él.

Durante este ciclo, tanto el delta de entrada disponible como el delta de entrada consumido se pasan en cada paso. Esto proporciona a cada fase el contexto completo necesario para reaccionar al evento de desplazamiento, consumirlo o escucharlo.

Como se ilustra en la Figura 1, el proceso de desplazamiento sigue este orden exacto:

1. Sobredesplazamiento: Recibe primero el delta de entrada inicial, lo que le da al sobredesplazamiento la oportunidad de reaccionar primero (por ejemplo, relajando un efecto de estiramiento activo).
2. Desplazamiento previo al desplazamiento anidado: Brinda la oportunidad de reaccionar al delta de entrada antes de la fase de desplazamiento. En esta fase, se puede consumir un delta de entrada o solo se puede supervisar para activar cambios en la IU, como contraer o expandir una barra de la app.
3. Transforma el delta de entrada: Ajusta el signo del delta de entrada sin procesar según la orientación y la dirección del diseño para garantizar un comportamiento de desplazamiento natural. Para obtener más información, consulta la sección Transforma la diferencia de entrada.
4. Desplazamiento: En esta fase, se recibe el delta de entrada disponible y no consumido, ajustado para que coincida con la configuración del contenedor de desplazamiento. Por lo general, usa este delta para actualizar su propio desplazamiento.
5. Revertir al delta de entrada sin procesar: Revierte el delta disponible y consumido de la fase Scroll al signo delta de entrada sin procesar original.
6. Desplazamiento posterior al desplazamiento anidado: Esta fase reacciona después de que se completa la fase de desplazamiento principal y recibe los deltas disponibles y consumidos que se actualizaron recientemente. Puede consumir cualquier entrada disponible restante o usar el contexto de lo que se acaba de consumir.
7. Sobredesplazamiento: En esta última fase, se analizan los deltas finales disponibles y consumidos. Cualquier entrada disponible restante que llegue a esta etapa se suele usar para generar efectos de borde, como un estiramiento o un resplandor, que indican que el usuario llegó al límite del área desplazable.

Delta de entrada de transformación

La diferencia de entrada del puntero requiere ajustes de signo en las fases de desplazamiento para que coincida con los contratos esperados. Antes de que el delta llegue a la fase Scroll, los modificadores de desplazamiento ajustan el delta de entrada según la orientación, la dirección del diseño y los contextos de derecha a izquierda. Esto sucede porque la entrada sin procesar hace un seguimiento del movimiento de píxeles físicos del puntero en la pantalla (por ejemplo, moverse hacia abajo aumenta la coordenada Y de la pantalla, lo que genera un delta positivo). Sin embargo, para lograr un "desplazamiento natural" en el que el contenido se mueva con el dedo, arrastrar hacia abajo significa que el viewport debe desplazarse hacia arriba sobre el contenido, lo que corresponde a un desplazamiento negativo.

Los deltas de entrada de otras fuentes de entrada, como la rueda del mouse o el panel táctil, no se transforman en las fases de desplazamiento.

Ejemplo: El puntero se mueve hacia la derecha con Modifier.horizontalScroll()

Para comprender cómo se consumen y transforman los deltas, consulta la Figura 2, que asigna un gesto en el que el puntero se mueve hacia la derecha.

• Desplazamiento previo: El gesto comienza con un delta de entrada sin procesar positivo de 100.
  • El sobredesplazamiento observa esto y consume 10, lo que deja 90.
  • El desplazamiento previo del desplazamiento anidado le da al componente superior la oportunidad de reaccionar, lo que consume 30. La diferencia sin procesar restante es 60.
• Transformación A: Antes de ingresar a la fase de desplazamiento, horizontalScroll invierte la diferencia sin procesar positiva restante (60) en una diferencia negativa (-60). Esto garantiza que el viewport se desplace hacia la izquierda para que el contenido parezca moverse hacia la derecha con el dedo del usuario.
• Desplazamiento: El componente desplazable de destino consume una parte de este delta transformado para actualizar su desplazamiento. En este ejemplo, consume -30, lo que deja -30 sin consumir.
• Transformación B: El delta de desplazamiento no consumido (-30) se vuelve a convertir en un delta sin procesar positivo (30) para que coincida con el contrato de desplazamiento anidado y sobredesplazamiento.
• Después del desplazamiento: El delta sin procesar restante se pasa de vuelta a la canalización.
  • El desplazamiento posterior al desplazamiento anidado consume 10, lo que deja 20.
  • El efecto de sobredesplazamiento usa los 20 finales para generar efectos visuales de borde, como un estiramiento o un resplandor, lo que resuelve por completo el delta de entrada a 0.

Referencia de transformación delta de entrada del puntero

En la siguiente tabla, se describe cómo se firman los deltas de entrada en diferentes fases y direcciones para la entrada del puntero.

	Delta de entrada sin procesar	Efecto de sobredesplazamiento	Desplazamiento anidado	scrollableArea con orientación horizontal	scrollableArea con orientación horizontal (invertida)	scrollableArea con orientación vertical	scrollableArea con orientación vertical (invertida)
El puntero se mueve HACIA ARRIBA	Negativo	Negativo	Negativo	N/A	N/A	Positivo	Negativo
El puntero se mueve HACIA ABAJO	Positivo	Positivo	Positivo	N/A	N/A	Negativo	Positivo
El puntero se mueve hacia la IZQUIERDA.	Negativo	Negativo	Negativo	Positivo (negativo para RTL)	Negativo (positivo para RTL)	N/A	N/A
El puntero se mueve hacia la DERECHA	Positivo	Positivo	Positivo	Negativo (positivo para RTL)	Positivo (negativo para RTL)	N/A	N/A