TabBar
備考
サンプルファイル: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp
TabBarウィジェットは、複数のタブを横に並べ、タブを押して画面・内容を切り替えるウィジェットです。
定義・役割
TabBarウィジェットは、ラベルの付いたタブを横に配置し、選択されたタブの下にインジケーター（表示線）を描画します。タブを押すとonChangedの動作が実行され、選択インデックスが渡されます。インジケーター・ラベルの色・スタイルやスクロールの有無を設定できます。
- カテゴリー: Contents（ナビゲーション）
- 最初に配置したときは空のタブが3つ入っています。カスタマイズして使ってみてください。
機能
| 機能 | 説明 |
|---|---|
| タブ切り替え | タブを押すと選択が変わり、onChangedが実行されます。 |
| タブの編集（スクリプト） | スクリプトでタブを追加・置換したり、ラベルを読み取ったりできます。 |
| インジケーター設定 | 選択表示線の色・太さ・サイズ基準（タブ/ラベル）を調整します。 |
| ラベルスタイル | 選択/未選択ラベルの色・スタイルと、横スクロールの有無を設定します。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- TabBar項目をキャンバスにドラッグ&ドロップします。
- タブ一覧（
tabs）のラベルを任意の値に変更します。 - 必要に応じて、タブが変わったときに実行する動作を
onChangedに接続します。 - 必要に応じてインジケーター・ラベルの色・スクロール（
isScrollable）などを調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
index | 現在選択されているタブ | 0 | 整数 |
tabs | タブ一覧（各タブはラベル） | 空のタブ3つ | リスト |
isScrollable | タブが多いときに横スクロールを許可 | オフ（false） | true / false |
padding | タブバー全体の余白 | 未設定 | 余白 |
indicatorColor | インジケーター（選択表示線）の色 | 未設定 | カラー |
indicatorWeight | インジケーターの太さ | 2 | 数値 |
indicatorPadding | インジケーターの余白 | 0 | 余白 |
indicator | インジケーターの装飾（デコ） | 未設定 | デコレーション |
indicatorSize | インジケーターの幅の基準 | tab | tab, label |
automaticIndicatorColorAdjustment | インジケーターの色を自動補正 | オン（true） | true / false |
dividerColor | 区切り線の色 | 未設定 | カラー |
labelColor | 選択ラベルの色 | 未設定 | カラー |
labelStyle | 選択ラベルのスタイル | 未設定 | テキストスタイル |
labelPadding | ラベルの余白 | 未設定 | 余白 |
unselectedLabelColor | 未選択ラベルの色 | 未設定 | カラー |
unselectedLabelStyle | 未選択ラベルのスタイル | 未設定 | テキストスタイル |
dragStartBehavior | ドラッグ開始時の動作 | start | start, down |
overlayColor | タッチオーバーレイの色 | 未設定 | カラー |
mouseCursor | マウスカーソル | 未設定 | カーソル |
enableFeedback | タッチフィードバックを使用 | 未設定 | true / false |
physics | スクロールの動作方式 | 未設定 | スクロール方式 |
注意・ヒント
ヒント
indicatorSizeをlabelにするとインジケーターの幅がラベルの長さに合わせられ、tabにするとタブ全体の幅に合わせられます。
ヒント
タブの数が多くて画面に収まらない場合は、isScrollableをオンにして横方向にスクロールさせます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、TabBar Widget Controlドキュメントで確認してください。