如何解决Flutter TabBar选中动画时长文本Widget重叠TabBar问题

DevOps 小满

2026-9-27

问题原因

你遇到的重叠问题核心原因是Transform.rotate默认不会裁剪子组件溢出父容器的部分，且TabBar默认也不会对子Tab做溢出裁剪，旋转时长文本会超出当前Tab的边界，叠加到相邻Tab的上层。

解决方案

方案1：裁剪溢出内容（改动最小，适配任意文本长度）

给Transform.rotate外层套上ClipRect组件，自动裁剪超出当前Tab边界的内容，即可完全避免重叠：
修改_animationGenerator方法中AnimatedBuilder的返回值即可：

return ClipRect(
  clipBehavior: Clip.hardEdge,
  child: Transform.rotate(angle: angle, child: child),
);

如果不希望文字被裁剪，可以搭配调高Tab的高度，给旋转预留足够的纵向空间。

方案2：增大Tab横向间距，从布局上避免重叠

修改TabBar的labelPadding属性，增加左右内边距，给长文本旋转留出足够的横向空间，不需要裁剪内容即可解决：

TabBar(
  controller: _tabController,
  // 可根据最长文本的旋转溢出量调整左右padding数值
  labelPadding: EdgeInsets.only(left: 18, right: 18, top: 5.0, bottom: 2.0),
  indicatorColor: Colors.black,
  tabs: _animationGenerator(),
)

方案3：将动画置于TabBar下层

如果要让动画（比如你后续要加的底部边框动画）在Tab内容的下层运行，可以用Stack调整绘制层级，把动画组件放在Stack的最前面（层级更低），Tab的图标、文字内容放在后面（层级更高），单个Tab的结构示例如下：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // 下层：动画元素（比如底部边框动效、旋转的背景层）
    Transform.rotate(angle: angle, child: 你的底部边框动画组件),
    // 上层：固定的Tab内容，不会被下层动画遮挡
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(iconData, color: Colors.black),
        Text(text, style: _tabTextStyle),
      ],
    )
  ],
)