使用新的 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 属性进行 widget 级自定义。或者，设置 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 属性自定义选项卡对齐方式

概述

背景

变更说明

迁移指南

时间线

参考资料