如何在颤动中删除选项卡之间的额外空间？答案

【问题标题】：How to remove extra space between tabs in flutter?如何在颤动中删除选项卡之间的额外空间？
【发布时间】：2021-11-20 04:52:30
【问题描述】：

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

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

那么我怎样才能减少它们之间的空间呢？代码如下：

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",
      ),
    ],
  ));
 }
}

【问题讨论】：

标签： flutter flutter-layout tabbar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我不想添加空格/填充我只想删除您可以在 2 个红色和绿色选项卡之间看到的额外空间。

【解决方案3】：

我能找到解决办法。

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

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

最终结果：

【讨论】：

【解决方案4】：

更改属性labelPadding 的值以调整选项卡的填充。对于没有填充，labelPadding: EdgeInsets.zero。

【讨论】：

【解决方案5】：

你可以给容器设置宽度属性

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

【讨论】：