内容

使用新的 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 文档

摘要

上下文

更改说明

迁移指南

时间线

参考