如何在 flutter 中删除选项卡之间多余的 space？

Question

我已经在 AppBar() 中实现了 TabBar()。

现在，选项卡之间有额外的 space。我在 Chrome（网络）上运行。我尝试向 TabBar() 内的 indicatorPadding、labelPadding 和 padding 参数添加零填充，但没有任何内容会缩小选项卡栏项目。

那么如何减少它们之间的space呢？这是代码：

Widget build(BuildContext context) {
  return Container(
    height: height,
    color: Colors.white,
    child: TabBar(
    indicatorColor: Colors.black,
    unselectedLabelColor: Colors.black54,
    indicatorSize: TabBarIndicatorSize.label,
    labelColor: Colors.black,
    labelStyle: const TextStyle(
      fontSize: 12,
    ),
    tabs: [
      Container(
        color: Colors.red,
        child: const Tab(
          icon: Icon(Icons.home_rounded),
          text: "Home",
          iconMargin: EdgeInsets.zero,
        ),
      ),
      Container(
        color: Colors.green,
        child: const Tab(
          icon: Icon(Icons.groups_rounded),
          iconMargin: EdgeInsets.zero,
          text: "My Network",
        ),
      ),
      const Tab(
        iconMargin: EdgeInsets.zero,
        icon: Icon(
          Icons.work_rounded,
          // size: 20,
        ),
        text: "Jobs",
      ),
      const Tab(
        iconMargin: EdgeInsets.zero,
        icon: Icon(Icons.message_rounded),
        text: "Messaging",
      ),
      const Tab(
        iconMargin: EdgeInsets.zero,
        icon: Icon(Icons.notifications_rounded),
        text: "Notification",
      ),
    ],
  ));
 }
}

Answer 1

如果你想让 space 围绕它们（左右）标签彼此靠近。尝试为标签栏添加这样的对称填充：

TabBar(... padding: EdgeInsets.symmetric(horizontal: 30),tabs:[...])

Answer 2

我能找到解决方法。

只需将 isScrollable: true 参数添加到 TabBar()，所有选项卡都会收缩到一侧。

在没有设置 isScrollable: true 的情况下，所有选项卡项目都占用了给定小部件中的所有 space。

最终结果：

Answer 3

有同样的问题。确保将制表符、标签和指示符的填充设置为零。

TabBar(
   indicatorSize: TabBarIndicatorSize.label,
   isScrollable: true,
   tabs: categoriesWidgets,
   padding: EdgeInsets.zero,
   indicatorPadding: EdgeInsets.zero,
   labelPadding: EdgeInsets.zero,
   indicatorWeight: 4,
 )

Answer 4

你可以给容器赋予宽度属性

 Container(
        color: Colors.red,
        width:2.0
        child: const Tab(
          icon: Icon(Icons.home_rounded),
          text: "Home",
          iconMargin: EdgeInsets.zero,
        ),
      ),

Answer 5

更改属性 labelPadding 的值以调整制表符的填充。对于无填充，labelPadding: EdgeInsets.zero.

Answer 6

也许你应该尝试 labelPadding 参数。给它一个 0 的值应该可以解决你的问题。

如何在 flutter 中删除选项卡之间多余的 space？

How to remove extra space between tabs in flutter?

tabbar

flutter

flutter-layout