Flutter自定义TabBar实现受阻：无法完成Upcoming/Past样式

常见问题排查与修复方案 #

1. 绑定TabBar和TabBarView的控制器 #

得保证TabBar和TabBarView用同一个控制器，要么用DefaultTabController直接包裹整个结构，要么手动创建TabController并传入两者，不然会出现切换Tab没反应的情况。

示例基础结构：

DefaultTabController(
  length: 2, // 对应两个Tab选项
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: const [
          Tab(text: 'Upcoming'),
          Tab(text: 'Past'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Upcoming Events')),
        Center(child: Text('Past Events')),
      ],
    ),
  ),
);

2. 自定义Tab样式匹配目标效果 #

如果目标效果有特殊样式（比如选中时下划线变宽、文字颜色变化），直接修改TabBar的属性就行：

• 用labelColor和unselectedLabelColor设置选中/未选中文字颜色
• 自定义指示器调整下划线样式：

TabBar(
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  indicator: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.blue,
        width: 2.0, // 调整选中时下划线宽度
      ),
    ),
  ),
  tabs: const [
    Tab(text: 'Upcoming'),
    Tab(text: 'Past'),
  ],
);

3. 修复TabBar布局错位问题 #

要是TabBar出现挤压、换行或者位置不对：

• 把TabBar放在AppBar的bottom属性里，它会自动适配高度
• 如果要把TabBar放在页面顶部而非AppBar下方，用Column+Expanded组合：

// 记得先创建TabController
final _tabController = TabController(length: 2, vsync: this);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        TabBar(
          controller: _tabController,
          tabs: const [Tab(text: 'Upcoming'), Tab(text: 'Past')],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              // Upcoming页面内容
              // Past页面内容
            ],
          ),
        ),
      ],
    ),
  );
}

4. 解决Tab切换后页面状态丢失问题 #

切换Tab后页面内容重置？给页面组件加上AutomaticKeepAliveClientMixin保持状态：

class UpcomingPage extends StatefulWidget {
  @override
  State<UpcomingPage> createState() => _UpcomingPageState();
}

class _UpcomingPageState extends State<UpcomingPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这行
    return Center(child: Text('Upcoming Events'));
  }
}

要是你能贴出具体的代码片段和截图细节（比如是切换没反应、样式不对还是布局错位），能更精准地帮你定位问题。

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