Flutter中TabBar占用AppBar空间问题排查求助

你的问题出在**CustomAppBar的尺寸计算错误以及AppBar.bottom中PreferredSize的高度设置不合理**，导致TabBar没有足够的独立空间，进而和AppBar的标题区域重叠。

具体问题点 #

1. CustomAppBar的preferredSize未考虑TabBar的高度：
   当前代码固定返回AppBar的默认高度，但当添加TabBar作为bottom时，需要将TabBar的高度也加入到整体AppBar的高度中，否则Scaffold只会给AppBar预留默认高度，TabBar会挤压AppBar的空间。

2. AppBar.bottom中PreferredSize的高度设置错误：
   你给PreferredSize设置了kToolbarHeight（AppBar的默认高度），这会给TabBar分配过大的空间，同时结合上面的尺寸计算错误，最终导致布局重叠。正确的做法是使用TabBar自身的 preferredSize 高度。

修改后的代码 #

修正CustomAppBar实现

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  final String appBarTitleText;
  final List<Widget>? actions;
  final bool isBackButtonEnabled;
  final Color? backgroundColor;
  final TextAlign appBarTitleAlign;
  final TabBar? tabBar;

  CustomAppBar({
    Key? key,
    required this.appBarTitleText,
    this.actions,
    this.backgroundColor,
    this.isBackButtonEnabled = true,
    this.appBarTitleAlign = TextAlign.center,
    this.tabBar,
  }) : super(key: key);

  // 修正：根据是否有tabBar计算整体高度
  @override
  Size get preferredSize {
    final appBarHeight = AppBar().preferredSize.height;
    if (tabBar == null) {
      return Size.fromHeight(appBarHeight);
    }
    // 加上tabBar自身的高度
    return Size.fromHeight(appBarHeight + tabBar!.preferredSize.height);
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: AppColors.appBarColor,
      centerTitle: appBarTitleAlign == TextAlign.center ? true : false,
      elevation: 0,
      automaticallyImplyLeading: isBackButtonEnabled,
      actions: actions,
      iconTheme: const IconThemeData(color: AppColors.appBarIconColor),
      title: AppBarTitle(
        text: appBarTitleText,
        textAlign: appBarTitleAlign,
      ),
      bottom: tabBar != null
          ? PreferredSize(
              // 修正：使用tabBar自身的高度
              preferredSize: tabBar!.preferredSize,
              child: Align(
                alignment: Alignment.centerLeft,
                child: tabBar,
              ),
            )
          : null, // 没有tabBar时设为null
    );
  }
}

效果说明 #

修改后，CustomAppBar会根据是否存在TabBar自动计算整体高度，Scaffold会为AppBar+TabBar预留足够的空间，TabBar会正确显示在AppBar的正下方，不会再重叠占用AppBar的标题区域。

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