如何在Flutter中设计实现指定样式的Tabbar组件

你要的这种带圆角选中背景、滑动联动过渡的 TabBar 效果，在 Flutter 中可以通过两种方案实现，无需引入第三方依赖：

方案1：基于官方 TabBar 改造（实现成本最低） #

官方原生 TabBar 支持高度自定义配置，90%的样式需求通过参数配置就能搞定：

• 配合 DefaultTabController 或自定义 TabController 使用，先指定 Tab 总数
• 核心配置项说明：
  • 用 indicator 属性自定义选中态背景，通过 BoxDecoration 实现指定圆角、颜色的选中背景
  • 用 indicatorSize 设置选中背景的适配规则，选 TabBarIndicatorSize.tab 即可匹配单个 Tab 的宽度
  • 用 labelColor/unselectedLabelColor 分别设置选中/未选中状态的文字颜色
  • 用 dividerColor 设为透明即可去掉原生 TabBar 默认的底部下划线
• 完整示例代码：

DefaultTabController(
  length: 3, // 替换为你的Tab实际数量
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      title: Container(
        height: 40,
        decoration: BoxDecoration(
          color: Colors.grey.shade100, // TabBar整体背景色
          borderRadius: BorderRadius.circular(20),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: TabBar(
            indicator: BoxDecoration(
              color: Colors.blueAccent, // 选中Tab的背景色
              borderRadius: BorderRadius.circular(20),
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey.shade600,
            labelStyle: const TextStyle(fontWeight: FontWeight.w600),
            unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.normal),
            dividerColor: Colors.transparent,
            tabs: const [
              Tab(text: "首页"),
              Tab(text: "分类"),
              Tab(text: "我的"),
            ],
          ),
        ),
      ),
    ),
    body: const TabBarView(
      children: [
        // 替换为对应Tab的页面组件
        Center(child: Text("首页")),
        Center(child: Text("分类")),
        Center(child: Text("我的")),
      ],
    ),
  ),
)

小提示：如果需要调整选中背景的左右边距，直接给 indicator 对应的 BoxDecoration 添加 padding 属性即可。

方案2：完全自定义 TabBar（灵活度最高） #

如果官方 TabBar 满足不了你的特殊交互需求（比如自定义选中动画、异形Tab样式），可以自行封装组件：

• 绑定自定义 TabController 监听切换事件，获取当前选中索引和切换动画进度
• 每个Tab项用 GestureDetector 包装，点击时调用 controller.animateTo() 触发切换
• 选中背景的过渡动效用 AnimatedPositioned 或 SlideTransition 实现，和切换进度联动
• 文字样式的切换过渡用 AnimatedDefaultTextStyle 实现，动效更顺滑

常见适配注意事项 #

• 如果Tab数量是动态生成的，把 length 参数替换为动态获取的Tab数组长度即可
• 如果需要和 PageView 滑动联动，把 TabController 和 PageController 的事件绑定，实现滑动页面自动切换Tab、点击Tab自动切换页面的效果
• 多尺寸屏幕适配时，Tab宽度不要写死，用 Expanded 或按屏幕宽度比例计算即可

内容的提问来源于stack exchange，提问作者Aniekan-abasi Akpakpan