Flutter无AppBar实现TabBar：消除顶部空白并拉伸标签指示器

嘿，我来帮你搞定这个TabBar的布局难题！你遇到的两个坑我太懂了：直接把TabBar塞到Scaffold的appBar参数里，因为类型不匹配导致布局错乱挤在角落；用AppBar的bottom属性又会多出顶部空白，确实影响美观。下面给你两个靠谱的解决方案，完美实现无顶部空白且标签填满侧边空间的效果：

方案一：把TabBar放在Scaffold的body中 #

这种方法更灵活，直接将TabBar和TabBarView放在Column布局里，用Expanded让TabBarView占满剩余空间，同时处理状态栏遮挡问题：

return Scaffold(
  backgroundColor: Colors.white,
  body: Column(
    children: [
      // 用空的SafeArea避开状态栏，避免TabBar被遮挡
      const SafeArea(child: SizedBox.shrink()),
      TabBar(
        tabs: widget._tabs.map((_Page page) {
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: false, // 设为false让标签平分宽度，填满侧边空间
        labelColor: Colors.blue, // 可选：设置选中标签颜色
        unselectedLabelColor: Colors.grey, // 可选：设置未选中标签颜色
        indicatorColor: Colors.blue, // 可选：设置指示器颜色
      ),
      // 让TabBarView占满剩余屏幕空间
      Expanded(
        child: TabBarView(
          controller: _tabController,
          children: widget._tabs.map((_Page page) {
            return SafeArea(
              top: false,
              bottom: false,
              child: page.page == Pages.cart
                  ? const CartHomeScreen()
                  : _lunchesLayout(),
            );
          }).toList(),
        ),
      ),
    ],
  ),
);

方案二：用PreferredSize自定义AppBar高度 #

如果你还是想把TabBar放在appBar参数里，可以用PreferredSize包裹TabBar，设置高度为TabBar的默认高度，彻底消除顶部空白：

import 'package:flutter/material.dart';

return Scaffold(
  backgroundColor: Colors.white,
  appBar: PreferredSize(
    // 设置高度为TabBar的默认高度，消除AppBar自带的顶部空白
    preferredSize: const Size.fromHeight(kTabBarHeight),
    child: SafeArea(
      child: TabBar(
        tabs: widget._tabs.map((_Page page) {
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: false, // 开启标签平分宽度模式
        labelColor: Colors.blue,
        unselectedLabelColor: Colors.grey,
        indicatorColor: Colors.blue,
      ),
    ),
  ),
  body: TabBarView(
    controller: _tabController,
    children: widget._tabs.map((_Page page) {
      return SafeArea(
        top: false,
        bottom: false,
        child: page.page == Pages.cart
            ? const CartHomeScreen()
            : _lunchesLayout(),
      );
    }).toList(),
  ),
);

关键注意点： #

• 要让标签填满侧边空间，必须把isScrollable设为false，这样TabBar会自动平分宽度给每个标签；如果设为true，标签会根据内容宽度自适应，不会填满侧边。
• 两种方案都用了SafeArea来处理状态栏的遮挡问题，确保TabBar在不同机型上都能正常显示。

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