Wrap
Wrap(랩) 위젯은 자식들을 한 방향으로 나열하다가 공간이 부족하면 자동으로 다음 줄(행 또는 열)로 넘겨 배치하는 레이아웃 컨테이너입니다.
버튼·태그·칩처럼 개수가 유동적인 항목을 가로 폭에 맞춰 자연스럽게 흐르도록 배치할 때 사용합니다.
정의 / 역할
Wrap 위젯은 자식들을 지정한 방향(direction)으로 배치하다가, 남은 공간에 다 들어가지 않으면 다음 줄로 자동 줄바꿈합니다. Row·Column과 달리 넘치는 자식을 잘라내거나 밀어내지 않고 다음 줄로 흘려보냅니다. 항목 사이 간격(spacing)과 줄 사이 간격(runSpacing), 정렬 방식을 각각 설정할 수 있습니다.
- 카테고리: Layouts
- 기본 배치 방향: 가로(
horizontal) - 기본 항목 간격 · 줄 간격:
0
기능
| 기능 | 설명 |
|---|---|
| 자동 줄바꿈 | 배치 방향으로 자식을 나열하다 공간이 부족하면 다음 줄(행·열)로 넘겨 배치합니다. |
| 배치 방향 | direction으로 가로(줄이 아래로 쌓임) 또는 세로(줄이 옆으로 쌓임) 흐름을 선택합니다. |
| 간격 설정 | 항목 사이 간격(spacing)과 줄 사이 간격(runSpacing)을 따로 지정합니다. |
| 정렬 설정 | 줄 안 정렬(alignment), 줄 자체 정렬(runAlignment), 교차축 정렬(crossAxisAlignment)을 각각 조정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Layouts 카테고리를 엽니다.
- Wrap 항목을 캔버스로 끌어다 놓습니다.
- Wrap 안에 배치할 자식 위젯들을 넣습니다.
- 오른쪽 속성 패널에서
direction으로 배치 방향을,spacing·runSpacing으로 간격을 조정합니다. - 필요하면
alignment·runAlignment·crossAxisAlignment로 정렬을 맞춥니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
direction | 자식을 나열하는 주 방향 | horizontal | horizontal, vertical |
alignment | 한 줄 안에서 주축 방향 정렬 | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
spacing | 같은 줄 안 항목 사이 간격 | 0 | 숫자 |
runAlignment | 여러 줄(run)을 교차축 방향으로 정렬 | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
runSpacing | 줄과 줄 사이 간격 | 0 | 숫자 |
crossAxisAlignment | 한 줄 안에서 교차축 방향 정렬 | start | start, end, center |
textDirection | 가로 배치 시 자식이 놓이는 좌우 방향 | 미지정 | rtl, ltr |
verticalDirection | 세로 방향으로 자식·줄이 쌓이는 순서 | down | up, down |
clipBehavior | 영역을 벗어난 내용을 잘라내는 방식 — 현재 버전에서는 동작하지 않습니다. | none | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
주의 / 팁
팁
spacing은 같은 줄 안 항목 사이 간격, runSpacing은 줄과 줄 사이 간격으로 서로 다릅니다. 두 값을 함께 조정해야 항목이 촘촘하게 뭉치지 않습니다.
노트
direction이 horizontal이면 줄이 위에서 아래로 쌓이고, vertical이면 줄이 왼쪽에서 오른쪽으로 쌓입니다. verticalDirection으로 쌓이는 순서를 뒤집을 수 있습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Wrap (랩) Widget Control 문서에서 확인하세요.