Compose NestedScrollConnection 을 이용한 딜허브 화면 구현
프론트엔드
Compose NestedScrollConnection 을 이용한 딜허브 화면 구현
두줄요약
Compose의 NestedScrollConnection으로 Tab 접힘과 페이지 스크롤을 연결하는 딜허브 화면 구현 방법을 설명했습니다. LazyColumn stickyHeader와 상태 제어를 함께 써서 화면별 인터랙션을 맞춘 사례를 공유했습니다.
구조와 흐름
- Compose 화면에서 Tab과 HorizontalPager를 Box 안에 배치하고, Tab 높이 측정값과 가변 offset을 조합해 상하 여백과 접힘 상태를 제어
- NestedScrollConnection으로 스크롤 이벤트를 가로채서 Tab의 일부 영역만 접히는 인터랙션과 페이지 내부 리스트 스크롤을 연결
- LazyColumn의 stickyHeader와 sticky 상태를 활용해 캘린더/필터 노출 위치와 이동 동작을 화면별로 다르게 처리