ButtonTabBar
ButtonTabBar(버튼탭바) 위젯은 각 탭이 버튼 모양으로 표시되는 탭바입니다.
탭을 눌러 화면·내용을 전환합니다.
정보
예제 파일: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp
정의 / 역할
ButtonTabBar 위젯은 버튼 형태의 탭들을 나열하고, 선택된 버튼과 선택되지 않은 버튼에 서로 다른 꾸밈(스타일)을 적용할 수 있습니다. 탭을 누르면 onChanged 동작이 실행되며 선택 인덱스를 전달합니다. TabBar와 기능은 같고 겉모양(버튼 스타일)이 다릅니다.
- 카테고리: Contents
- 처음 배치 시 빈 탭 3개가 들어 있습니다.
기능
| 기능 | 설명 |
|---|---|
| 탭 전환 | 버튼 탭을 누르면 선택이 바뀌고 onChanged가 실행됩니다. |
| 버튼 스타일 | 선택/미선택 버튼의 꾸밈(데코)·라벨 스타일을 따로 설정합니다. |
| 탭 편집(스크립트) | 스크립트로 탭을 추가·교체하거나 라벨을 읽을 수 있습니다. |
| 레이아웃 설정 | 높이·여백·간격·정렬·전환 시간 등을 조정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- ButtonTabBar 항목을 캔버스로 끌어다 놓습니다.
- 탭 목록(
tabs)의 라벨을 원하는 값으로 수정합니다. onChanged에 탭이 바뀔 때 실행할 동작을 연결합니다.- 필요하면 선택/미선택 버튼 꾸밈(
selectedDecoration·unselectedDecoration)과 높이·여백을 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
index | 현재 선택 탭 | 0 | 정수 |
tabs | 탭 목록 (각 탭은 라벨) | 빈 탭 3개 | 목록 |
duration | 탭 전환 애니메이션 시간 | 250 | 숫자(ms) |
height | 탭바 높이 | 46 | 숫자(px) |
selectedDecoration | 선택된 버튼 꾸밈(데코) | 미지정 | 데코 |
unselectedDecoration | 선택되지 않은 버튼 꾸밈 | 미지정 | 데코 |
selectedLabelStyle | 선택 라벨 스타일 | 미지정 | 텍스트 스타일 |
unselectedLabelStyle | 미선택 라벨 스타일 | 미지정 | 텍스트 스타일 |
splashColor | 터치 스플래시 색 | 미지정 | 색상 |
contentPadding | 버튼 안쪽 여백 | 가로 0 | 여백 |
buttonMargin | 버튼 바깥 여백 | 0 | 여백 |
labelSpacing | 라벨 간격 | 4 | 숫자 |
elevation | 그림자 높이 | 0 | 숫자 |
center | 탭바를 가운데 정렬 | 꺼짐(false) | 참 / 거짓 |
lockScroll&expandButton | 스크롤 잠금(버튼 폭 확장) | 꺼짐(false) | 참 / 거짓 |
buttonLabelMainAxisAlignment | 버튼 내 라벨 정렬 | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
주의 / 팁
팁
선택 상태와 미선택 상태를 다르게 보이려면 selectedDecoration(선택)과 unselectedDecoration(미선택)을 각각 설정합니다.
팁
기능(탭 전환·스크립트 제어)은 TabBar와 동일합니다. 겉모양만 버튼형이 필요할 때 ButtonTabBar를 사용합니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 ButtonTabBar (버튼탭바) Widget Control 문서에서 확인하세요.