Flutter中Floating Action Button被CupertinoTabBar遮挡的解决方法

当前在Flutter页面中使用Floating Action Button时，按钮被CupertinoTabBar遮挡，无法正常显示在其上方。以下是对应的页面build方法代码片段：

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: NavDrawer(),
    appBar: AppBar(
      title: const Text('Manager Jobs'),
      backgroundColor: CustomColors.wrkioBlue,
    ),
    body: Padding(padding: EdgeInsets.only(bottom: 80),
      child: Container(
        height: MediaQuery.of(context).size.height - 100,
        child: StreamBuilder<List<DocumentReference>>(
            stream: _getJobReferences(),
            builder: (context, jobRefsSnapshot) {
              if (jobRefsSnapshot.connectionState == ConnectionState.waiting) {
                return const CircularProgressIndicator();
              } else {
                if (jobRefsSnapshot.hasData) {
                  final jobRefs = jobRefsSnapshot.data!;
                  return StreamBuilder<List<Job>>(
                      stream: _getManagerJobs(jobRefs),
                      builder: (context, jobsSnapshot) {
                        if (jobsSnapshot.connectionState == ConnectionState.waiting) {
                          return const CircularProgressIndicator();
                        } else {
                          if (jobsSnapshot.hasData) {
                            final jobs = jobsSnapshot.data!;
                            return ListView(
                              children: jobs.map((job) => jobRow(context, job)).toList(),
                            );
                          } else if (jobsSnapshot.hasError) {
                            return Text('${jobsSnapshot.error}');
                          }
                          return const CircularProgressIndicator();
                        }
                      }
                  );
                } else if (jobRefsSnapshot.hasError) {
                  return Text('${jobRefsSnapshot.error}');
                }
                return const CircularProgressIndicator();
              }
            }),
      ),
    ),
    // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked ,
    floatingActionButton: FloatingActionButton.extended(
      icon: Icon(Icons.add, color: Colors.white,),
      label: Text('New'),
      backgroundColor: CustomColors.wrkioBlue,
      onPressed: () {
        // Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => CreateJob()));
        Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(builder: (context) => CreateJob()));
      },
    ),
  );
}

解决方法： #

• 启用FAB位置配置
  取消代码中被注释的floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,，这个配置会让FAB停靠在底部导航栏的上方区域，避免被遮挡。

• 正确关联CupertinoTabBar
  确保你的CupertinoTabBar是作为Scaffold的bottomNavigationBar属性传入的，而不是单独放在页面底部。Scaffold会自动识别底部导航栏的存在，为FAB预留合适的显示空间。示例配置：

  return Scaffold(
    // ...其他已有的属性
    bottomNavigationBar: CupertinoTabBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.settings),
          label: '设置',
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton.extended(
      // 你的FAB配置
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
  

• 移除手动布局调整
  代码中Padding(padding: EdgeInsets.only(bottom: 80),和height: MediaQuery.of(context).size.height - 100,这类手动设置底部内边距和容器高度的代码会干扰Scaffold的自动布局，建议直接移除，让系统自动管理页面空间。

• 无需额外设置安全区域
  这个场景下不需要单独设置安全区域，安全区域主要用于处理系统状态栏、底部手势操作栏的间距问题，和TabBar遮挡FAB的问题无关。

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