Flutter Tab实现：解决未选中Tab背景灰色不生效问题

要实现未选中Tab背景为灰色、选中Tab背景为高亮色的效果，默认TabBar的样式配置无法直接满足需求，我们可以通过自定义Tab组件结合TabController的选中状态来精准控制样式，以下是完整实现方案：

核心思路 #

1. 用TabController（或DefaultTabController）管理Tab的切换状态
2. 自定义Tab的UI布局，通过TabController.index判断当前选中项，未选中项设置灰色背景，选中项设置目标高亮色
3. 借助AnimatedBuilder监听TabController的状态变化，确保切换Tab时样式实时更新

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TabBarDemo(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({super.key});

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabTitles = ['全部', '待付款', '待发货', '待收货', '已完成'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabTitles.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tab示例')),
      body: Column(
        children: [
          // 自定义Tab栏
          Container(
            color: Colors.grey[100],
            child: AnimatedBuilder(
              animation: _tabController.animation!,
              builder: (context, child) {
                return Row(
                  children: _tabTitles.asMap().entries.map((entry) {
                    final int index = entry.key;
                    final String title = entry.value;
                    final bool isSelected = _tabController.index == index;

                    return Expanded(
                      child: InkWell(
                        onTap: () => _tabController.animateTo(index),
                        child: Container(
                          padding: const EdgeInsets.symmetric(vertical: 12),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: isSelected ? Theme.of(context).primaryColor : Colors.grey[300],
                            borderRadius: BorderRadius.circular(8),
                          ),
                          margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
                          child: Text(
                            title,
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black87,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                );
              },
            ),
          ),
          // Tab内容区域
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: _tabTitles.map((title) {
                return Center(child: Text('$title 页面'));
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• AnimatedBuilder用于监听Tab切换的动画状态，保证样式随选中状态实时变更
• 用InkWell实现Tab的点击交互，替代默认Tab组件的点击逻辑，更灵活控制样式
• 通过isSelected变量区分选中/未选中状态，分别设置背景色和文字颜色，未选中背景用Colors.grey[300]适配设计需求
• 外层容器的浅灰色背景可根据实际需求调整，让Tab栏整体视觉更协调

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