Información sobre las fases de desplazamiento

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

A lo largo de 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, consumir o escuchar el evento de desplazamiento.

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

1. Overscroll: Primero, recibe el delta de entrada inicial, lo que le da al overscroll 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 algún delta de entrada o simplemente se puede supervisar para activar cambios en la IU, como contraer o expandir una barra de la app.
3. Transform input delta: 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 Transform input delta.
4. Desplazamiento: Esta fase 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 de 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 anidado posterior al desplazamiento: Esta fase reacciona después de que se completa la fase de desplazamiento principal y recibe los deltas disponibles y consumidos recién actualizados. Puede consumir cualquier entrada disponible restante o usar el contexto de lo que acaba de consumir.
7. Overscroll: Esta última fase analiza los deltas finales disponibles y consumidos. Cualquier entrada disponible restante que llegue a esta etapa se usa, por lo general, para generar efectos de borde, como un estiramiento o un brillo, que indican que el usuario llegó al límite del área desplazable.

Transforma el delta de entrada

El delta de entrada del puntero requiere ajustes de signo en las fases de desplazamiento para que coincidan con los contratos esperados. Antes de que el delta alcance la fase de desplazamiento, los modificadores de desplazamiento ajustan el delta de entrada según la orientación, la dirección del diseño y los contextos de RTL. Esto sucede porque la entrada sin procesar hace un seguimiento del movimiento físico del puntero en la pantalla (por ejemplo, mover el puntero 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 la ventana gráfica 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 durante 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 muestra un gesto en el que el puntero se mueve hacia la derecha.

• Previo al desplazamiento: El gesto comienza con un delta de entrada sin procesar positivo de 100.
  • Overscroll observa esto y consume 10, lo que deja 90.
  • Desplazamiento previo al desplazamiento anidado: Le da al componente principal la oportunidad de reaccionar y consumir 30. El delta sin procesar restante es 60.
• Transformación A: Antes de ingresar a la fase de desplazamiento, horizontalScroll invierte el delta sin procesar positivo restante (60) en un delta negativo (-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 de desplazamiento. En este ejemplo, se 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 nuevo a la canalización.
  • Nested scroll post-scroll consume 10, lo que deja 20.
  • El efecto de sobre-desplazamiento usa el valor final 20 para generar efectos visuales en los bordes, como un estiramiento o un resplandor, y resuelve por completo el delta de entrada en 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