TabBar
정보
예제 파일: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp
TabBar(탭바) 위젯은 여러 탭을 가로로 나열해, 탭을 눌러 화면·내용을 전환하는 위젯입니다.
정의 / 역할
TabBar 위젯은 라벨이 달린 탭들을 가로로 배치하고, 선택된 탭 아래에 인디케이터(표시선)를 그려줍니다. 탭을 누르면 onChanged 동작이 실행되며 선택 인덱스를 전달합니다. 인디케이터·라벨 색·스타일과 스크롤 여부를 설정할 수 있습니다.
- 카테고리: Contents (탐색)
- 처음 배치 시 빈 탭 3개가 들어 있습니다. 커스텀 해 사용해보세요.
기능
| 기능 | 설명 |
|---|---|
| 탭 전환 | 탭을 누르면 선택이 바뀌고 onChanged가 실행됩니다. |
| 탭 편집(스크립트) | 스크립트로 탭을 추가·교체하거나 라벨을 읽을 수 있습니다. |
| 인디케이터 설정 | 선택 표시선의 색·두께·크기 기준(탭/라벨)을 조정합니다. |
| 라벨 스타일 | 선택/미선택 라벨의 색·스타일과 가로 스크롤 여부를 설정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- TabBar 항목을 캔버스로 끌어다 놓습니다.
- 탭 목록(
tabs)의 라벨을 원하는 값으로 수정합니다. - 필요하면
onChanged에 탭이 바뀔 때 실행할 동작을 연결합니다. - 필요하면 인디케이터·라벨 색·스크롤(
isScrollable) 등을 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
index | 현재 선택 탭 | 0 | 정수 |
tabs | 탭 목록 (각 탭은 라벨) | 빈 탭 3개 | 목록 |
isScrollable | 탭이 많을 때 가로 스크롤 허용 | 꺼짐(false) | 참 / 거짓 |
padding | 탭바 전체 여백 | 미지정 | 여백 |
indicatorColor | 인디케이터(선택 표시선) 색 | 미지정 | 색상 |
indicatorWeight | 인디케이터 두께 | 2 | 숫자 |
indicatorPadding | 인디케이터 여백 | 0 | 여백 |
indicator | 인디케이터 꾸밈(데코) | 미지정 | 데코 |
indicatorSize | 인디케이터 폭 기준 | tab | tab, label |
automaticIndicatorColorAdjustment | 인디케이터 색 자동 보정 | 켜짐(true) | 참 / 거짓 |
dividerColor | 구분선 색 | 미지정 | 색상 |
labelColor | 선택 라벨 색 | 미지정 | 색상 |
labelStyle | 선택 라벨 스타일 | 미지정 | 텍스트 스타일 |
labelPadding | 라벨 여백 | 미지정 | 여백 |
unselectedLabelColor | 미선택 라벨 색 | 미지정 | 색상 |
unselectedLabelStyle | 미선택 라벨 스타일 | 미지정 | 텍스트 스타일 |
dragStartBehavior | 드래그 시작 동작 | start | start, down |
overlayColor | 터치 오버레이 색 | 미지정 | 색상 |
mouseCursor | 마우스 커서 | 미지정 | 커서 |
enableFeedback | 터치 피드백 사용 | 미지정 | 참 / 거짓 |
physics | 스크롤 동작 방식 | 미지정 | 스크롤 방식 |
주의 / 팁
팁
indicatorSize를 label로 하면 인디케이터 폭이 라벨 길이에 맞춰지고, tab이면 탭 전체 폭에 맞춰집니다.
팁
탭 개수가 많아 화면을 넘치면 isScrollable을 켜서 가로로 스크롤되게 합니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 TabBar (탭바) Widget Control 문서에서 확인하세요.