使用新的 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 的开头：

迁移前的代码

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

迁移后的代码

dartTabBar(
  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.tabAlignment 属性自定义选项卡对齐

概述

背景

变更说明

迁移指南

时间线

参考资料