Flutter中仅Android端TabBar被系统工具栏遮挡的解决方法

你遇到的核心问题是未适配Android的状态栏（含刘海区域），同时PreferredSize的高度设置未考虑状态栏的额外高度，导致TabBar被系统元素遮挡，手动加padding又会触发尺寸溢出提示。

修改方案： #

1. 移除const修饰符，因为需要动态获取设备状态栏高度
2. 使用SafeArea包裹TabBar布局，自动避开系统状态栏区域
3. 调整PreferredSize的高度，将状态栏高度与TabBar默认高度相加，避免尺寸溢出提示

修改后的代码如下：

class _PlantsFragmentState extends State<PlantsFragment> {
  @override
  Widget build(BuildContext context) {
    // 获取设备状态栏高度
    final statusBarHeight = MediaQuery.of(context).padding.top;
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: PreferredSize(
          // 总高度 = 状态栏高度 + TabBar默认高度（48.0）
          preferredSize: Size.fromHeight(statusBarHeight + 48.0),
          child: SafeArea(
            // 仅在顶部应用安全区域，避免左右底部不必要的留白
            top: true,
            left: false,
            right: false,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TabBar(
                  labelColor: Colors.green,
                  unselectedLabelColor: Colors.green,
                  indicatorColor: Colors.green,
                  indicatorSize: TabBarIndicatorSize.tab,
                  tabs: const [
                    Tab(
                      icon: Icon(Icons.search),
                      text: "Search",
                    ),
                    Tab(
                      icon: Icon(Icons.favorite),
                      text: "Favorites"
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键说明： #

• SafeArea的top: true会自动为顶部添加对应状态栏高度的内边距，完美避开刘海和系统工具栏
• preferredSize的高度设置为状态栏高度加TabBar默认高度，确保整体尺寸匹配预设值，不会出现"尺寸超出16像素"的提示
• 保留Tab组件的const修饰符，不影响性能优化

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