如何删除颤振中选项卡之间的多余空间？

Question

我已经TabBar()在我的AppBar().

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

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

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

有同样的问题。确保将选项卡、标签和指示器的填充设置为零。

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

Answer 2

TabBar( ... tabAlignment: TabAlignment.start, )

Answer 3

我能够找到解决方案。

只需isScrollable: true向所有选项卡添加参数即可TabBar()收缩到一侧。

如果不设置isScrollable: true所有选项卡，项目就会占用给定小部件中的所有空间。

最终结果：