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

嘿，这个需求很好实现～ Flutter的Tab组件支持自定义子元素，我们可以通过给每个Tab（除了最后一个）添加垂直分隔线来达到效果。我帮你修改了代码，直接用就能看到效果：

TabBar(
  unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
  labelColor: Colors.black,
  controller: controller,
  tabs: <Tab>[
    Tab(
      child: IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Girls"),
            SizedBox(width: 16), // 调整文本和分隔线的间距
            VerticalDivider(
              color: Color.fromRGBO(119, 119, 119, 1),
              width: 1, // 分隔线的宽度
            ),
          ],
        ),
      ),
    ),
    Tab(
      child: IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Hero"),
            SizedBox(width: 16),
            VerticalDivider(
              color: Color.fromRGBO(119, 119, 119, 1),
              width: 1,
            ),
          ],
        ),
      ),
    ),
    Tab(text: "Open"), // 最后一个Tab不需要分隔线
  ],
)

关键细节说明： #

• 用IntrinsicHeight包裹Row，能让垂直分隔线自动匹配Tab的高度，避免出现分隔线过短的问题。
• 分隔线颜色我选了和未选中文字一致的颜色，这样风格更统一，你可以根据需求调整。
• 如果你的Tab数量以后会增加，用循环生成会更灵活，比如这样：

tabs: ["Girls", "Hero", "Open"]
    .asMap()
    .entries
    .map((entry) {
  final index = entry.key;
  final text = entry.value;
  return Tab(
    child: IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(text),
          if (index != 2) SizedBox(width: 16), // 最后一个Tab不加分隔线和间距
          if (index != 2)
            VerticalDivider(
              color: Color.fromRGBO(119, 119, 119, 1),
              width: 1,
            ),
        ],
      ),
    ),
  );
}).toList(),

这样不管你加多少个Tab，最后一个都不会多出分隔线，维护起来更方便～

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