FlutterにおけるTabBar要素について
概要
TabBarウィジェットは、画面上部のナビゲーションバーとして使われ、ユーザーが異なるタブを選択して異なるビューを切り替えることができる。
見た目
UI系ウィジェットでないのでなし
解説
まず、ページインデックス変数を作成する。
int _currentPageIndex = 0;次にページに相当するウィジェットを格納するリストを用意する。
List<Widget> _pages = [
Page1(),
Page2(),
Page3(),
];[Scaffoldウィジェット]に、リストの選択要素をページのインデックス変数としてUIを記述する。
body: _pages[_currentPageIndex],そして、Tabを選択した際に選択されたインデックス番号を変数にsetStateで格納する。
void _onItemTapped(int index) {
setState(() {
_currentPageIndex = index;
});
}TabBarは、AppBar要素内のtitle内に配置される。
appBar: AppBar(
title: TabBar(
onTap: _onItemTapped,
tabs: [
Tab(text: '1'),
Tab(text: '2'),
],
),
),プロパティ
| プロパティ名 | 概要 | 備考 |
|---|---|---|
controller | TabControllerを指定 | TabControllerはTabBarとTabBarView間のタブ選択をコーディネートする。 |
isScrollable | TabBarがスクロール可能かどうかを指定 | TabBarの全てのタブが表示可能な場合に有用 |
indicatorColor | abBarのインジケータ（タブが選択されたときに表示される線）の色を指定 | |
labelColor | 選択されたタブのラベルの色を指定 | |
unselectedlabelColor | 選択されていないタブのラベルの色を指定 | |
tabs | TabBarに表示するタブのリストを指定 |
