Flutter 中如何缩小 TabBar 的 indicator 尺寸使其贴合内容

解决方法 #

你可以通过调整TabBar的几个核心属性实现目标效果，具体修改如下：

关键修改点：

• 添加indicatorSize: TabBarIndicatorSize.label，让指示器的宽度自动匹配Tab的内容宽度，而非默认占满整个Tab项的可用宽度
• 配置indicatorPadding调整指示器的上下左右内边距，缩小高度使其贴合文字
• 调整Tab的默认padding，缩小内容周围的多余空白
• 修正第一个Tab的嵌套写法，将带小红点的布局直接作为Tab的child属性

修改后完整代码：

TabBar(
  onTap: (index) {
    cubit.changeBottomNavIndex(index);
  },
  // 指示器尺寸匹配标签内容
  indicatorSize: TabBarIndicatorSize.label,
  // 调整指示器内边距，控制宽高贴合度，可根据实际效果调整数值
  indicatorPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
  indicator: BoxDecoration(
    border: Border.all(color: goldDefaultColor, width: 1),
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(50),
    color: Colors.grey[600],
  ),
  labelColor: goldDefaultColor,
  unselectedLabelColor: Colors.white,
  // 统一设置所有Tab的内边距，缩小多余空白
  tabAlignment: TabAlignment.center,
  tabs: [
    Tab(
      // 把带红点的布局放在Tab的child属性中，Row设置最小宽度适配内容
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          Text('Live'),
          SizedBox(width: 4),
          CircleAvatar(
            radius: 5.0,
            backgroundColor: Colors.red,
          ),
        ],
      ),
    ),
    const Tab(
      text: 'Map',
    ),
    const Tab(
      text: 'Device',
    ),
  ],
  controller: _tabController,
)

如果还需要更精细的指示器尺寸控制，可以自定义indicator为自定义的Decoration类，手动指定宽高参数即可。

内容的提问来源于stack exchange，提问作者Mahmoud Al-Haroon