如何将“TabBar”与自定义起始位置对齐到左侧答案

【问题标题】：How to align `TabBar` to the left with a custom starting position如何将“TabBar”与自定义起始位置对齐到左侧
【发布时间】：2019-08-28 04:56:34
【问题描述】：

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

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

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

【问题讨论】：

我不太明白这个，你也可以分享一下截图吗？

标签： dart flutter padding tabbar

【解决方案1】：

在这里对齐标签栏的完美解决方案：

   bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Align(
              alignment: Alignment.centerLeft,
              child: TabBar(

                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: AppColors.cyan_blue,
                labelColor: AppColors.cyan_blue,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 4.0,
                      color: AppColors.cyan_blue,
                    ),
                insets: EdgeInsets.only(left: 10, right: 110.0)),
                labelStyle: TextStyle(fontSize: 16.0),
                //For Selected tab
                unselectedLabelStyle: TextStyle(fontSize: 12.0),
                isScrollable: true,
                labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
                tabs: [
                  Container(
                    child: Tab(
                      text: "Profile Summary\t\t\t",
                    ),
                  ),
                  Container(
                    child: Tab(
                      text: "Business summary",
                    ),
                  ),

                ],
              ),
            ),
          ),

【讨论】：

请对您的回答进行详细解释，以便下一位用户更好地理解您的回答。

【解决方案2】：

默认使用常量kToolbarHeight

将标签栏与相同的标题栏高度对齐

bottom: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Align(
  alignment: Alignment.centerLeft,
  child: TabBar(/*your code*/),
 ),
),

【讨论】：

【解决方案3】：

您可以使用 Align 小部件将 TabBar 的选项卡向左对齐，这将是 PreferredSize 的子级。

这对我有用：

  bottom: PreferredSize(
    preferredSize: Size.fromHeight(40),
    ///Note: Here I assigned 40 according to me. You can adjust this size acoording to your purpose.
    child: Align(
      alignment: Alignment.centerLeft,
      child: TabBar(
        isScrollable: true,
        tabs: state.sortedStreets.keys.map(
          (String key) => Tab(
              text: key.toUpperCase(),
          ),
        ).toList(),
      ),
    ),
  ),

如果您只需要 TabBar 在正文中，您可以删除 PreferredSize 小部件。

【讨论】：

【解决方案4】：

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

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

示例如下：

【讨论】：

【解决方案5】：

也许你的TabBar 没有填满整个水平区域。如果您将TabBar 包装在另一个像这样扩展整个宽度的容器中会发生什么。

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

【讨论】：