使用新的 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(),
);