dart - 如何使用自定义起始位置将 `TabBar` 向左对齐

Question

我目前正在开发一个 Flutter 应用程序，我想在其中显示 TabBar从左边开始。如果 AppBar有一个领先的属性我想缩进 TabBar 的起始位置匹配它。然后在滚动时，它仍然会通过而不离开白色区域。

这是我目前显示的代码 TabBar在AppBar的中间:

AppBar(
  bottom: TabBar(
    isScrollable: true,
    tabs: state.sortedStreets.keys.map(
      (String key) => Tab(
        text: key.toUpperCase(),
      ),
    ).toList(),
  ),
);

Answer 1

根据 tabs.dart source code 中的注释，当 TabBar 的可滚动属性设置为 false 时，Flutter TabBar 小部件会均匀地隔开选项卡。 :

// Add the tap handler to each tab. If the tab bar is not scrollable
// then give all of the tabs equal flexibility so that they each occupy
// the same share of the tab bar's overall width.

因此，您可以使用以下方法获得左对齐的 TabBar:

isScrollable: true,

如果您想使用与 Tab 标签宽度相同的指标(例如，如果您设置 indicatorSize: TabBarIndicatorSize.label ，那么您可能还需要像这样设置自定义指标:

TabBar(
  indicator: UnderlineTabIndicator(
  borderSide: BorderSide(
    width: 4,
    color: Color(0xFF646464),
  ),
  insets: EdgeInsets.only(
    left: 0,
    right: 8,
    bottom: 4)),
  isScrollable: true,
  labelPadding: EdgeInsets.only(left: 0, right: 0),
  tabs: _tabs
    .map((label) => Padding(
      padding:
        const EdgeInsets.only(right: 8),
      child: Tab(text: "$label"),
   ))
   .toList(),
)

这将是什么样子的示例: