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

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

我能够找到解决方案。

只需将

isScrollable: true

参数添加到

TabBar()

所有选项卡都会收缩到一侧。

如果没有设置

isScrollable: true

，所有选项卡项目都会占用给定小部件中的所有空间。

最终结果：

Answer 3

如果您想使选项卡周围（右侧和左侧）的空间彼此更靠近。尝试为标签栏添加像这样的对称填充：

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

Answer 4

更改属性

labelPadding

的值以调整选项卡的填充。 如果没有填充，

labelPadding: EdgeInsets.zero

。

Answer 5

也许你应该尝试

labelPadding

参数。给它一个值

0

应该可以解决你的问题。

Answer 6

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

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

Answer 7

标签栏( ... tabAlignment：TabAlignment.start， )