Flutter TabBar标签文字尾部淡出截断 末尾字符无法显示问题

问题现象 #

TabBar标签文本过长时会自动触发长文本淡出效果，文字末尾字符无法正常查看，效果如下：

问题复现代码：

Widget _tabBar() {
    return TabBar(
      onTap: (tabIndex) {
        setState(() {
          _tabController.index = tabIndex;
        });
      },
      padding: EdgeInsets.zero,
      controller: _tabController,
      labelColor: currentTheme.currentAppTheme.colorAccent,
      unselectedLabelColor: currentTheme.currentAppTheme.tabInactiveColor,
      labelStyle: const TextStyle(fontSize: 10),
      indicatorColor: currentTheme.currentAppTheme.colorAccent,
      indicatorPadding: EdgeInsets.zero,
      indicatorWeight: 4,
      tabs: [...],
    );
  }

问题原因 #

TabBar默认会给非滚动模式下的标签分配固定等分宽度，标签内文本默认配置为单行、溢出时使用淡出效果截断，当文本长度超过标签可用宽度时就会出现该问题。

解决方案 #

根据业务场景从以下方案中选择即可：

• 方案1：开启标签可滚动模式（最常用）
  给TabBar添加isScrollable: true配置，此时每个标签会根据自身文本内容自适应宽度，不会被强行压缩到固定等分尺寸，从根源避免文本截断。如果觉得标签间距过大，可同步配置labelPadding调整左右内边距，给文本留出更多显示空间：

  Widget _tabBar() {
      return TabBar(
        isScrollable: true, // 新增该行开启滚动
        labelPadding: const EdgeInsets.symmetric(horizontal: 8), // 可选，调整标签内边距
        onTap: (tabIndex) {
          setState(() {
            _tabController.index = tabIndex;
          });
        },
        padding: EdgeInsets.zero,
        controller: _tabController,
        labelColor: currentTheme.currentAppTheme.colorAccent,
        unselectedLabelColor: currentTheme.currentAppTheme.tabInactiveColor,
        labelStyle: const TextStyle(fontSize: 10),
        indicatorColor: currentTheme.currentAppTheme.colorAccent,
        indicatorPadding: EdgeInsets.zero,
        indicatorWeight: 4,
        tabs: [...],
      );
    }
  

• 方案2：固定标签等分宽度，自定义文本显示规则
  如果业务要求标签必须等分屏幕宽度、不支持滚动，可自定义Tab内的文本组件，替换默认的淡出截断逻辑：
  • 溢出显示省略号：给Text组件配置maxLines: 1和overflow: TextOverflow.ellipsis
  • 长文本自动缩小适配：用FittedBox包裹Text组件，让文本自动缩放至标签宽度内完整显示
    示例代码：

  // 省略号模式
  const Tab(
    child: Text(
      "超长标签文本内容",
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ),
  )
  
  // 自动缩放宽高适配模式
  Tab(
    child: FittedBox(
      fit: BoxFit.scaleDown,
      child: Text("超长标签文本内容", style: const TextStyle(fontSize: 10)),
    ),
  )
  

• 方案3：覆盖默认主题关闭淡出效果
  如果需要全局修改TabBar的文本溢出逻辑，可以通过Theme组件覆盖TabBar的默认文本样式，替换溢出规则：

  Widget _tabBar() {
    return Theme(
      data: Theme.of(context).copyWith(
        tabBarTheme: TabBarTheme.of(context).copyWith(
          labelStyle: const TextStyle(fontSize: 10, overflow: TextOverflow.visible),
          unselectedLabelStyle: const TextStyle(fontSize: 10, overflow: TextOverflow.visible),
        ),
      ),
      child: TabBar(
        // 原有TabBar配置保持不变
        onTap: (tabIndex) {
          setState(() {
            _tabController.index = tabIndex;
          });
        },
        padding: EdgeInsets.zero,
        controller: _tabController,
        labelColor: currentTheme.currentAppTheme.colorAccent,
        unselectedLabelColor: currentTheme.currentAppTheme.tabInactiveColor,
        indicatorColor: currentTheme.currentAppTheme.colorAccent,
        indicatorPadding: EdgeInsets.zero,
        indicatorWeight: 4,
        tabs: [...],
      ),
    );
  }
  

注意：如果未开启isScrollable: true就配置TextOverflow.visible，过长的文本会超出标签边界与相邻标签内容重叠，非必要不建议使用该配置。

内容的提问来源于stack exchange，提问作者Nikita Shadkov