Как выровнять `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

Виджет Flutter TabBar равномерно распределяет вкладки, когда свойство прокрутки TabBar имеет значение false, как указано в комментарии в исходном коде 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 с помощью:

isScrollable: true,

и если вы хотите использовать индикаторы, которые имеют ту же ширину, что и метки вкладки (например, как если бы вы установили 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(),
)

Пример того, как это будет выглядеть:

Answer 2

Может быть, ваш TabBar не заполнен всю горизонтальную область. Что произойдет, если вы поместите TabBar в другой Контейнер, который увеличит всю ширину следующим образом.

Container(
  width: double.infinity
  child: TabBar(
    ...
    ...
  )
)