Flutter TabBar能否隐藏当前激活Tab？求可行实现方案

原生Flutter TabBar确实没有直接支持隐藏当前激活Tab的配置，你之前修改宽度的方案会有视觉瑕疵，下面提供两种更可靠的实现方式：

方案一：自定义TabBar的Tab渲染逻辑 #

通过TabController监听选中状态，在生成TabBar.tabs时，直接让当前选中的Tab返回空容器，同时隐藏原生指示器避免错位。

示例代码：

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

  @override
  State<HiddenActiveTabPage> createState() => _HiddenActiveTabPageState();
}

class _HiddenActiveTabPageState extends State<HiddenActiveTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabLabels = ['标签1', '标签2', '标签3'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabLabels.length, vsync: this);
    _tabController.addListener(() => setState(() {}));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          indicator: const BoxDecoration(), // 隐藏原生选中指示器
          tabs: _tabLabels.asMap().entries.map((entry) {
            final idx = entry.key;
            final label = entry.value;
            return idx == _tabController.index 
                ? const SizedBox.shrink() 
                : Tab(text: label);
          }).toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: _tabLabels.map((label) => Center(child: Text('$label 内容'))).toList(),
      ),
    );
  }
}

注意：这种方式会让TabBar的宽度分配不均，空Tab会占用0宽度，适合对布局精度要求不高的场景。

方案二：完全自定义Tab栏（推荐） #

放弃原生TabBar，用Row+GestureDetector实现自定义Tab按钮组，配合IndexedStack切换内容，完全掌控每个Tab的显示逻辑，彻底避免原生组件的限制。

示例代码：

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

  @override
  State<CustomHiddenTabPage> createState() => _CustomHiddenTabPageState();
}

class _CustomHiddenTabPageState extends State<CustomHiddenTabPage> {
  int _currentTabIndex = 0;
  final List<String> _tabLabels = ['标签1', '标签2', '标签3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(48),
          child: Container(
            color: Theme.of(context).primaryColor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: _tabLabels.asMap().entries.map((entry) {
                final idx = entry.key;
                final label = entry.value;
                if (idx != _currentTabIndex) {
                  return GestureDetector(
                    onTap: () => setState(() => _currentTabIndex = idx),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                      child: Text(label, style: const TextStyle(color: Colors.white, fontSize: 16)),
                    ),
                  );
                }
                return const SizedBox(); // 选中Tab留空占位，保持布局均匀
              }).toList(),
            ),
          ),
        ),
      ),
      body: IndexedStack(
        index: _currentTabIndex,
        children: _tabLabels.map((label) => Center(child: Text('$label 内容'))).toList(),
      ),
    );
  }
}

这种方式可以自由调整Tab的样式、间距和布局逻辑，完美实现“切换时原Tab显示、新激活Tab隐藏”的需求，没有原生组件的限制。

第三方包参考 #

如果想依赖第三方包简化开发，可以尝试flutter_custom_tab_bar，它支持高度自定义Tab的显示规则，包括隐藏选中Tab的配置，但自定义方案更灵活且无外部依赖。

内容的提问来源于stack exchange，提问作者Karol Wiśniewski