Flutter非滚动TabBar调整Tab组件大小与字号问题

针对你遇到的TabBar组件间距冗余、文字适配不佳的问题，我们可以从几个核心点入手调整，以下是具体方案：

1. 移除无效的固定宽度SizedBox #

你当前给Tab的child添加SizedBox(width:80)是无效的——因为当isScrollable: false时，Flutter会强制让所有Tab平分TabBar的总宽度，固定宽度的约束会被覆盖，反而可能导致文字被挤压。直接移除这些SizedBox，让文字自然占据空间即可。

2. 调小labelPadding减少Tab间左右间距 #

你现在设置的labelPadding: const EdgeInsets.symmetric(horizontal: 35)是导致Tab之间间距过大的主要原因，把这个值调小（甚至设为EdgeInsets.zero），就能让Tab文字更紧凑：

labelPadding: const EdgeInsets.symmetric(horizontal: 8), // 根据需求调整

3. 统一设置文字样式，放大字号 #

通过labelStyle和unselectedLabelStyle可以统一选中/未选中Tab的文字大小，避免默认的字号差异，直接把字号放大到你需要的尺寸：

labelStyle: const TextStyle(fontSize: 18, color: CustomColors.wrkioBlue),
unselectedLabelStyle: const TextStyle(fontSize: 18, color: CustomColors.wrkioBlue),

4. 减少Tab的上下内边距 #

默认Tab有上下内边距，如果你想让TabBar整体更紧凑，可以给Tab的child嵌套一个Container，手动控制上下padding：

Tab(
  child: Container(
    padding: const EdgeInsets.symmetric(vertical: 4), // 调小上下内边距
    child: AutoSizeText('Connections', maxLines: 1),
  ),
)

5. 全局调整TabBar高度（可选） #

如果需要进一步压缩TabBar的整体高度，可以通过Theme设置tabHeight（默认是48）：

// 在你的MaterialApp主题中添加
theme: ThemeData(
  tabBarTheme: TabBarTheme(
    tabHeight: 36, // 自定义TabBar高度
  ),
),

修改后的完整代码示例 #

TabBar(
  controller: _tabController,
  labelPadding: const EdgeInsets.symmetric(horizontal: 8),
  indicatorColor: CustomColors.wrkioBlue,
  isScrollable: false,
  labelStyle: const TextStyle(fontSize: 18, color: CustomColors.wrkioBlue),
  unselectedLabelStyle: const TextStyle(fontSize: 18, color: CustomColors.wrkioBlue),
  onTap: (index) {
    pageController.jumpToPage(index);
  },
  tabs: const <Widget>[
    Tab(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 4),
        child: AutoSizeText('Connections', maxLines: 1),
      ),
    ),
    Tab(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 4),
        child: AutoSizeText('Network', maxLines: 1),
      ),
    ),
    Tab(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 4),
        child: AutoSizeText('Chats', maxLines: 1),
      ),
    ),
  ],
),

这样调整后，Tab会自动适配文字宽度，字号放大，同时多余的内边距/外边距被移除，非滚动模式也能正常工作。

内容的提问来源于stack exchange，提问作者Rob Smith