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

您可以使用 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 小部件。

Answer 2

默认情况下，要将标签栏与标题栏高度对齐，请使用常量 kToolbarHeight

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

Answer 3

您的TabBar可能没有填满整个水平区域。如果将TabBar包裹在另一个这样扩展了整个宽度的容器中，会发生什么情况。

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

Answer 4

根据tabs.dart source code中的注释，当TabBar的scrollable属性设置为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，则可能需要这样做），那么您可能还希望设置一个自定义指示器，如下所示：< / p>

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 5

在此处对齐标签栏的完美解决方案：

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

                ],
              ),
            ),
          ),

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

5 个答案: