新しい TabBar.tabAlignment プロパティを使用したタブの配置のカスタマイズ

コンテンツ

まとめ

使用するTabBar.tabAlignmentタブの配置をカスタマイズするにはTabBar。

コンテクスト

のTabBar.tabAlignmentプロパティはマテリアル 3 がどこに設定されるかを設定します。TabBarタブを配置します。のTabAlignmentenum には次の値があります。

TabAlignment.start: タブをスクロール可能な項目の先頭に揃えます。TabBar。
TabAlignment.startOffset: タブを先頭に揃えます。スクロール可能TabBarのオフセットで52.0ピクセル。
TabAlignment.center: タブを中央に揃えます。TabBar。
TabAlignment.fill: タブを先頭に揃えてタブを引き伸ばします固定を埋めるためにTabBar。

スクロール可能なTabBarは次の配置をサポートします。

TabAlignment.start
TabAlignment.startOffset
TabAlignment.center

固定されたTabBarは次の配置をサポートします。

TabAlignment.fill
TabAlignment.center

設定するとThemeData.useMaterial3にtrue、スクロール可能な344c3d19-2月3-4f05-8681-5d4087a4e748タブを次のように配置しますTabAlignment.startOffsetデフォルトでは。この配置を変更するには、TabBar.tabAlignmentウィジェットレベルのカスタマイズ用のプロパティ。または、TabBarThemeData.tabAlignmentアプリレベルのカスタマイズのプロパティ。

変更内容の説明

設定するとTabBar.isScrollableとThemeData.useMaterial3にtrue、スクロール可能なタブTabBarデフォルトはTabAlignment.startOffset。これにより、タブが先頭に揃えられます。スクロール可能TabBarのオフセットで52.0ピクセル。これにより、以前の動作が変更されます。タブはスクロール可能な項目の先頭に揃えられましたTabBar許容される幅を超えるタブを表示する必要がある場合。

移行ガイド

スクロール可能なマテリアル 3TabBar用途TabAlignment.startOffsetとしてデフォルトのタブの配置。これにより、タブが先頭に揃えられます。スクロール可能TabBarのオフセットで52.0ピクセル。

タブを先頭に揃えるにはスクロール可能TabBar、設定TabBar.tabAlignmentにTabAlignment.start。この変更により、52.0ピクセルオフセット。次のコードスニペットは、使用方法を示しています。TabBar.tabAlignmentにタブをスクロール可能な項目の先頭に揃えますTabBar:

移行前のコード:

TabBar(
  isScrollable: true,
  tabs: List<Tab>.generate(
    count,
    (int index) => Tab(text: 'Tab $index'),
  ).toList(),
);

移行後のコード:

TabBar(
  tabAlignment: TabAlignment.start,
  isScrollable: true,
  tabs: List<Tab>.generate(
    count,
    (int index) => Tab(text: 'Tab $index'),
  ).toList(),
);

タイムライン

リリースされたバージョン: 3.11.0-0.0.pre
安定版リリース: TBD

参考文献

API ドキュメント:

TabBar
TabBar.tabAlignment
TabAlignment