如何将"TabBar"与自定义起始位置向左对齐

问题描述

我目前正在开发Flutter应用程序，我想在其中显示从左侧开始的TabBar.如果AppBar具有前导属性，我想缩进TabBar的起始位置以使其匹配.然后在滚动时，它仍然会通过并且不会留下白色区域.

I'm currently working on a Flutter app in which I'd like to display the TabBar starting on the left. If an AppBar has a leading property I'd like to indent the starting position of the TabBar to match it. Then on scroll, it would still pass through and not leave white area.

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

This is the code that I have that currently displays a TabBar in the middle of the AppBar:

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

推荐答案

根据 tabs.dart源代码:

// 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:

So you can get a left-aligned TabBar by using:

isScrollable: true,

，并且如果您想使用宽度与Tab标签相同的指示器(例如，如果设置indicatorSize: TabBarIndicatorSize.label则与之相同)，那么您可能还希望设置一个自定义指示器，如下所示:

and if you want to use indicators that are the same width as the Tab labels (eg. as you would by if you set indicatorSize: TabBarIndicatorSize.label) then you may also want to have a custom indicator set like so:

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(),
)

示例如下:

这篇关于如何将"TabBar"与自定义起始位置向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！