스크롤 단계 이해하기

스크롤은 여러 단계로 나뉩니다. 입력 델타는 각 단계에서 움직임을 소비하거나 움직임에 반응할 수 있도록 단계 시퀀스를 통해 디스패치됩니다.

이 주기 전체에서 사용 가능한 입력 델타와 사용된 입력 델타가 모든 단계에서 전달됩니다. 이렇게 하면 각 단계에서 스크롤 이벤트에 반응하거나, 스크롤 이벤트를 사용하거나, 스크롤 이벤트를 수신하는 데 필요한 전체 컨텍스트가 제공됩니다.

그림 1에 나와 있듯이 스크롤 프로세스는 다음 순서를 따릅니다.

1. 오버스크롤: 오버스크롤이 먼저 반응할 수 있도록 (예: 활성 스트레치 효과를 완화하여) 초기 입력 델타를 먼저 수신합니다.
2. 중첩된 스크롤 사전 스크롤: 스크롤 단계 전에 입력 델타에 반응할 기회를 제공합니다. 이 단계에서는 일부 입력 델타가 사용될 수도 있고 앱 바를 접거나 펼치는 등 UI 변경을 트리거하기 위해 모니터링될 수도 있습니다.
3. 입력 델타 변환: 자연스러운 스크롤 동작을 보장하기 위해 레이아웃 방향과 방향에 따라 원시 입력 델타의 부호를 조정합니다. 자세한 내용은 입력 델타 변환 섹션을 참고하세요.
4. 스크롤: 이 단계에서는 스크롤 컨테이너 구성과 일치하도록 조정된 사용 가능한 미소비 입력 델타를 수신합니다. 일반적으로 이 델타를 사용하여 자체 스크롤 오프셋을 업데이트합니다.
5. 원시 입력 델타로 되돌리기: 스크롤 단계에서 사용 가능하고 소비된 델타를 원래 원시 입력 델타 부호로 되돌립니다.
6. 중첩 스크롤 사후 스크롤: 이 단계는 기본 스크롤 단계가 완료된 후 반응하여 새로 업데이트된 사용 가능 및 사용된 델타를 수신합니다. 남은 사용 가능한 입력을 소비하거나 방금 소비된 항목의 컨텍스트를 사용할 수 있습니다.
7. 오버스크롤: 이 마지막 단계에서는 최종적으로 사용 가능한 델타와 사용된 델타를 살펴봅니다. 이 단계에 도달하는 나머지 사용 가능한 입력은 일반적으로 사용자가 스크롤 가능한 영역의 경계에 도달했음을 나타내는 스트레치나 빛과 같은 가장자리 효과를 유도하는 데 사용됩니다.

입력 델타 변환

포인터 입력 델타에는 예상 계약과 일치하도록 스크롤 단계 전반에서 부호 조정이 필요합니다. 델타가 스크롤 단계에 도달하기 전에 스크롤 수정자는 방향, 레이아웃 방향, RTL 컨텍스트에 따라 입력 델타를 조정합니다. 이는 원시 입력이 화면에서 포인터의 실제 픽셀 이동을 추적하기 때문입니다 (예: 아래로 이동하면 화면의 Y 좌표가 증가하여 양수 델타가 생성됨). 하지만 콘텐츠가 손가락과 함께 이동하는 '자연스러운 스크롤'을 구현하려면 아래로 드래그할 때 뷰포트가 콘텐츠 위로 이동해야 하며 이는 음수 스크롤 오프셋에 해당합니다.

마우스 휠이나 터치패드와 같은 다른 입력 소스의 입력 델타는 스크롤 단계 전체에서 변환되지 않습니다.

예: Modifier.horizontalScroll()을 사용하여 포인터가 오른쪽으로 이동함

델타가 소비되고 변환되는 방식을 이해하려면 포인터가 오른쪽으로 이동하는 동작을 매핑하는 그림 2를 참고하세요.

• 사전 스크롤: 동작이 100의 양수 원시 입력 델타로 시작됩니다.
  • Overscroll은 이를 관찰하고 10을 소비하여 90이 남습니다.
  • 중첩 스크롤 사전 스크롤을 통해 상위 구성요소가 반응하여 30을 사용할 수 있습니다. 남은 원시 델타는 60입니다.
• 변환 A: 스크롤 단계에 들어가기 전에 horizontalScroll가 남은 양수 원시 델타 (60)를 음수 델타 (-60)로 변환합니다. 이렇게 하면 뷰포트가 왼쪽으로 이동하여 콘텐츠가 사용자의 손가락과 함께 오른쪽으로 이동하는 것처럼 보입니다.
• 스크롤: 타겟 스크롤 가능 구성요소는 변환된 델타의 일부를 사용하여 스크롤 오프셋을 업데이트합니다. 이 예에서는 -30을 소비하므로 -30이 소비되지 않은 상태로 남습니다.
• 변환 B: 사용되지 않은 스크롤 델타 (-30)이 중첩된 스크롤 및 오버스크롤 계약과 일치하도록 양수 원시 델타 (30)로 다시 변환됩니다.
• 스크롤 후: 나머지 원시 델타가 파이프라인으로 다시 전달됩니다.
  • 스크롤 후 중첩된 스크롤이 10을 소비하여 20이 남습니다.
  • 오버스크롤 효과는 최종 20을 사용하여 스트레치나 빛과 같은 시각적 가장자리 효과를 적용하고 입력 델타를 0으로 완전히 해결합니다.

포인터 입력 델타 변환 참조

다음 표에서는 포인터 입력의 다양한 단계와 방향에서 입력 델타에 서명하는 방법을 간략하게 설명합니다.

	원시 입력 델타	오버스크롤 효과	중첩 스크롤	가로 방향의 scrollableArea	scrollableArea 가로 방향 (반전됨)	세로 방향의 scrollableArea	scrollableArea (역전됨)
포인터가 위로 이동합니다.	부정적	부정적	부정적	해당 사항 없음	해당 사항 없음	긍정적	부정적
포인터가 아래로 이동합니다.	긍정적	긍정적	긍정적	해당 사항 없음	해당 사항 없음	부정적	긍정적
포인터가 왼쪽으로 이동합니다.	부정적	부정적	부정적	양수 (RTL의 경우 음수)	부정 (RTL의 경우 긍정)	해당 사항 없음	해당 사항 없음
포인터가 오른쪽으로 이동합니다.	긍정적	긍정적	긍정적	부정 (RTL의 경우 긍정)	양수 (RTL의 경우 음수)	해당 사항 없음	해당 사항 없음