ButtonTabBar

ButtonTabBarウィジェットは、各タブがボタンの形で表示されるタブバーです。
タブを押して画面や内容を切り替えます。

備考

サンプルファイル: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp

定義・役割

ButtonTabBarウィジェットは、ボタン形のタブを並べ、選択されたボタンと選択されていないボタンに別々の装飾（スタイル）を適用できます。タブを押すとonChangedの動作が実行され、選択インデックスを渡します。TabBarと機能は同じで、見た目（ボタンスタイル）が異なります。

機能	説明
タブの切り替え	ボタンタブを押すと選択が変わり、`onChanged`が実行されます。
ボタンスタイル	選択/未選択ボタンの装飾（デコ）・ラベルスタイルを別々に設定します。
タブの編集（スクリプト）	スクリプトでタブを追加・置き換えたり、ラベルを読み取れます。
レイアウト設定	高さ・余白・間隔・アライメント・切り替え時間などを調整します。

プロパティ	説明	デフォルト値	値 / タイプ
`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`）	true / false
`lockScroll&expandButton`	スクロールのロック（ボタン幅を拡張）	オフ（`false`）	true / false
`buttonLabelMainAxisAlignment`	ボタン内のラベルのアライメント	`start`	`start`, `end`, `center`, `spaceBetween`, `spaceAround`, `spaceEvenly`

ヒント

選択状態と未選択状態を違う見た目にするには、selectedDecoration（選択）とunselectedDecoration（未選択）をそれぞれ設定します。

ヒント

機能（タブの切り替え・スクリプト制御）はTabBarと同じです。見た目だけボタン形にしたいときにButtonTabBarを使用します。

ヒント

このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体はButtonTabBar Widget Controlドキュメントで確認してください。