https://docs.flutter.dev/release/breaking-changes/tab-alignment

使用新的 TabBar.tabAlignment 属性自定义选项卡对齐方式

<nav aria-label="面包屑" style="box-sizing: border-box; display: block;">

1. 保持最新状态
2. 重大变化
3. 使用新的 TabBar.tabAlignment 属性自定义选项卡对齐方式

</nav>

</header>

概括

用于TabBar.tabAlignment自定义TabBar.

语境

该TabBar.tabAlignment属性设置材质 3TabBar放置选项卡的位置。该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
• 修复材质 3 可滚动TabBar