NestedScroll
NestedScroll(중첩 스크롤) 위젯은 헤더 영역과 본문 영역의 스크롤을 하나로 연동해 함께 움직이게 하는 스크롤 컨테이너입니다.
상단 헤더가 접히거나 고정되는 동안 아래 목록이 이어서 스크롤되는 화면에 사용합니다.
정보
이 위젯은 Free 플랜에서 잠겨 있으며, Pro·Enterprise 플랜에서 사용할 수 있습니다.
정의 / 역할
NestedScroll 위젯은 바깥(outer) 스크롤과 안쪽(inner) 스크롤을 하나의 제스처로 연결합니다. 헤더 슬리버로 지정한 자식은 위쪽 헤더 영역에, 나머지 자식은 본문 영역에 배치되어, 헤더가 접힌 뒤 본문이 이어서 스크롤됩니다.
- 카테고리: Layouts
- 스크롤 방향: 세로(기본) 또는 가로
- 헤더 고정(pinned) 및 떠 있는 헤더(floating) 동작 지원
기능
| 기능 | 설명 |
|---|---|
| 헤더·본문 스크롤 연동 | 바깥 헤더 영역과 안쪽 본문 영역의 스크롤을 하나의 동작으로 이어서 처리합니다. |
| 스크롤 방향 | scrollDirection으로 세로/가로를 지정하고, reverse로 진행 방향을 뒤집습니다. |
| 헤더 떠 있게 하기 | floatHeaderSlivers를 켜면 아래로 되돌려 스크롤할 때 헤더가 즉시 나타납니다. |
| 스크롤 이벤트 | 스크롤 시작·진행·정지·바닥 도달 시점에 동작을 실행합니다. |
| 프로그래밍 제어 | 스크립트로 맨 위 또는 맨 아래로 스크롤 위치를 이동시킵니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Layouts 카테고리를 엽니다.
- NestedScroll 항목을 캔버스로 끌어다 놓습니다.
- 헤더로 쓸 자식과 본문으로 쓸 자식을 안에 배치합니다.
- 오른쪽 속성 패널에서
scrollDirection·reverse등 스크롤 동작을 설정합니다. - 필요하면
onStartScroll·onScrollEnd등 스크롤 이벤트에 실행할 동작을 연결합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
scrollDirection | 스크롤 방향 | 세로(vertical) | horizontal, vertical |
reverse | 스크롤 진행 방향을 뒤집기 | false | 참/거짓 |
floatHeaderSlivers | 되돌려 스크롤할 때 헤더를 즉시 띄우기 | false | 참/거짓 |
clipBehavior | 내용이 영역을 벗어날 때 잘라내는 방식 | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
dragStartBehavior | 드래그 스크롤이 시작되는 기준 | start | down, start |
restorationId | 스크롤 위치 복원용 식별자 | 미지정 | 문자열 |
주의 / 팁
팁
헤더 영역과 본문 영역은 자식의 배치로 나뉩니다. 헤더 슬리버로 지정된 자식이 위쪽 헤더로, 나머지 자식이 본문으로 처리됩니다.
경고
NestedScroll 안에 또 다른 NestedScroll을 중첩하는 구성은 지원되지 않습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 NestedScroll (중첩 스크롤) Widget Control 문서에서 확인하세요.