Flutter自定义TabBar：如何将Tab文本左对齐实现统一布局

要实现TabBar项文本向左偏移的统一布局，可以通过以下方式调整：

1. 统一处理Tab内容的对齐方式 #

在CustomTabBar内部对传入的tabs批量处理，让每个Tab的内容左对齐：

修改CustomTabBar的build方法：

@override
Widget build(BuildContext context) {
  return TabBar(
    isScrollable: true,
    tabAlignment: TabAlignment.start,
    indicatorColor: AppColors.primary,
    unselectedLabelColor: AppColors.textSecondary,
    labelColor: AppColors.primary,
    dividerColor: Colors.transparent,
    indicator: CircleTabIndicator(
      color: AppColors.primary,
      radius: 4,
    ),
    // 批量设置每个Tab内容左对齐
    tabs: tabs.map((tab) => Align(
          alignment: Alignment.centerLeft,
          child: tab,
        )).toList(),
  );
}

2. 同步调整指示器位置 #

原CircleTabIndicator默认绘制在Tab中心下方，文本左对齐后需要调整指示器位置，确保匹配文本区域：

修改_CirclePainter的paint方法：

@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
  // 根据设计需求调整偏移量，示例为16（对应文本左侧间距）
  final double indicatorX = 16; 
  final Offset circleOffset =
      offset + Offset(indicatorX, cfg.size!.height - radius);
  canvas.drawCircle(circleOffset, radius, _paint);
}

如果需要指示器跟随文本中心，可以通过TextPainter计算文本宽度后动态调整X轴偏移，或者给文本设置固定宽度。

3. （可选）单独设置Tab左对齐 #

如果需要灵活控制单个Tab样式，可在传入CustomTabBar时直接定义左对齐的Tab：

CustomTabBar(
  tabs: [
    Tab(
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text("Tab 1"),
      ),
    ),
    Tab(
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text("较长的Tab文本"),
      ),
    ),
  ],
)

通过以上调整即可实现所有Tab文本向左偏移的统一布局效果。

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