위젯은 와 연결된 스와이프할 수 있는 콘텐츠 영역을 만들 수 있는 Flutter 프레임워크의 일부입니다. 선택한 탭에 따라 다른 콘텐츠 보기 간에 전환하는 방법을 제공합니다.TabBarViewTabBar
작동 방식은 다음과 같습니다.TabBarView
위젯은 위젯의 컨텐츠 또는 탭과 컨텐츠 보기를 동기화하기 위해 제공하는 위젯으로 배치되어야 합니다.TabBarViewDefaultTabControllerTabController
는 자식 목록을 가져오며, 여기서 각 자식은 특정 탭의 콘텐츠를 나타냅니다. 자식의 순서는 에 있는 해당 탭의 순서와 일치해야 합니다.TabBarViewWidgetTabBar
사용자가 에서 탭을 선택하면 에서 자동으로 애니메이션을 적용하고 해당 콘텐츠 보기를 표시합니다.TabBarTabBarView
의 콘텐츠 보기는 , , , 또는 사용자 지정 위젯과 같은 모든 종류의 위젯이 될 수 있습니다.TabBarViewContainerListViewGridView
lazily는 자식을 빌드하는데, 이는 현재 표시되는 콘텐츠 보기와 바로 인접한 이웃만 위젯 트리에서 빌드되고 유지 관리됨을 의미합니다. 이렇게 하면 메모리 사용량과 빌드 시간이 줄어들어 성능이 향상됩니다.TabBarView
탭 및 콘텐츠 보기의 수가 많거나 동적인 경우 의 속성을 사용하여 사용자가 탭 사이를 스크롤할 때 요청 시 콘텐츠 보기를 빌드할 수 있습니다.childrenTabBarView.builder()
다음은 사용 예입니다.TabBarView
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tabbed App'),
bottom: TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
children: [
Container(
color: Colors.red,
child: Center(child: Text('Content for Tab 1')),
),
Container(
color: Colors.green,
child: Center(child: Text('Content for Tab 2')),
),
Container(
color: Colors.blue,
child: Center(child: Text('Content for Tab 3')),
),
],
),
),
)
이 예제에는 배경색이 다른 세 개의 위젯이 포함되어 있으며 각 위젯은 특정 탭에 대한 콘텐츠를 표시합니다. 콘텐츠 보기는 사용자가 다른 탭을 선택할 때 느리게 빌드됩니다.TabBarViewContainer
