使用新的 TabBar.tabAlignment 屬性自定義選項卡對齊

使用 TabBar.tabAlignment 自定義 TabBar 中選項卡的對齊方式。

TabBar.tabAlignment 屬性用於設定 Material 3 TabBar 中選項卡的位置。TabAlignment 列舉具有以下值：

• 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 時，可滾動 TabBar 預設會將選項卡對齊為 TabAlignment.startOffset。要更改此對齊方式，請為小部件級別自定義設定 TabBar.tabAlignment 屬性。或者，為應用程式級別自定義設定 TabBarThemeData.tabAlignment 屬性。

當您將 TabBar.isScrollable 和 ThemeData.useMaterial3 設定為 true 時，可滾動 TabBar 中的選項卡將預設為 TabAlignment.startOffset。這將選項卡對齊到可滾動 TabBar 的開頭，並帶有 52.0 畫素的偏移量。這改變了之前的行為。當需要顯示的選項卡多於寬度允許時，選項卡會與可滾動 TabBar 的開頭對齊。

Material 3 可滾動 TabBar 使用 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.13.0-17.0.pre
穩定版本：3.16

API 文件

• TabBar
• TabBar.tabAlignment
• TabAlignment

相關 PR

• 引入 TabBar.tabAlignment
• 修復 Material 3 可滾動 TabBar