Flutter中如何为TabBar的标签之间添加垂直分隔线？

针对你的需求，这里提供两种可靠的实现方式，避免分隔线可点击或标签移位的问题：

方案一：自定义Tab内容（简单直接） #

给每个Tab（除最后一个）添加右侧分隔线，通过Row组件组合文本和分隔线，同时调整Tab的padding保证布局美观：

TabBar(
  indicatorPadding: EdgeInsets.symmetric(vertical: 10),
  indicator: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(5)),
      side: BorderSide(color: Colors.white)),
    color: Color(0xFF1C1B20),
  ),
  labelColor: AppColors.whiteE3EAF6,
  labelStyle: TextStyle(color: Colors.white),
  tabs: [
    _buildTabWithDivider("1M"),
    _buildTabWithDivider("5M"),
    _buildTabWithDivider("15M"),
    _buildTabWithDivider("30M"),
    Tab(
      text: "1H",
      padding: EdgeInsets.symmetric(horizontal: 12),
    ),
  ],
)

// 自定义带分隔线的Tab
Widget _buildTabWithDivider(String label) {
  return Tab(
    padding: EdgeInsets.symmetric(horizontal: 12),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(label),
        SizedBox(width: 16),
        Container(
          width: 1,
          height: 20, // 分隔线高度可按需调整
          color: Colors.white.withOpacity(0.3), // 匹配目标效果的浅色分隔线
        ),
      ],
    ),
  );
}

注意：此方案中分隔线属于Tab的一部分，点击分隔线区域会触发对应Tab的切换逻辑，如果不需要这种行为，建议使用方案二。

方案二：Stack叠加分隔线（分隔线独立不触发点击） #

通过Stack将TabBar和分隔线分层，分隔线位于TabBar上方但仅占据分隔线区域，不影响Tab的点击交互：

Container(
  width: 350,
  child: Stack(
    children: [
      // 原有的TabBar
      TabBar(
        indicatorPadding: EdgeInsets.symmetric(vertical: 10),
        indicator: ShapeDecoration(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            side: BorderSide(color: Colors.white)),
          color: Color(0xFF1C1B20),
        ),
        labelColor: AppColors.whiteE3EAF6,
        labelStyle: TextStyle(color: Colors.white),
        tabs: [
          Tab(text: "1M"),
          Tab(text: "5M"),
          Tab(text: "15M"),
          Tab(text: "30M"),
          Tab(text: "1H"),
        ],
      ),
      // 叠加垂直分隔线
      Positioned.fill(
        child: Row(
          children: List.generate(4, (index) {
            return Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    width: 1,
                    height: 20,
                    color: Colors.white.withOpacity(0.3),
                  ),
                ],
              ),
            );
          }) + [Expanded(child: SizedBox())],
        ),
      ),
    ],
  ),
)

说明：

• 因为有5个Tab，所以需要4条分隔线，通过List.generate批量生成
• Positioned.fill让分隔线容器充满TabBar的宽度，利用Row的Expanded均匀分配空间，确保分隔线精准落在Tab之间的间隙
• 分隔线仅占据1px宽度，其余区域透明，点击会穿透到下层的TabBar，不会触发额外交互

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