Flutter应用Bottom Navigation Bar不显示/无法工作问题求助

你的BottomNavigationBar既不显示也无法工作，核心问题出在HomeFragment里嵌套了独立的Scaffold——主屏幕HomeScreen已经用Scaffold设置了底部导航栏，但HomeFragment的Scaffold会完全覆盖主屏幕的body区域，导致外层的bottomNavigationBar被挤到视野之外。

问题拆解 #

主屏幕的Scaffold负责承载底部导航栏，而每个Fragment（比如HomeFragment）只需要提供页面内容即可，不需要再套一层Scaffold。嵌套的Scaffold会占据整个屏幕高度，把主屏幕的底部导航栏彻底遮挡。

修复步骤 #

直接移除HomeFragment中的Scaffold，调整抽屉打开逻辑（改用主屏幕的抽屉），修改后的核心代码如下：

class _HomeFragmentState extends State<HomeFragment> {
  final items = [
    Image.asset('images/app_images/ads.png',fit: BoxFit.cover,height: 180,),
    Image.asset('images/app_images/ads.png',fit: BoxFit.cover,height: 180,),
    Image.asset('images/app_images/ads.png',fit: BoxFit.cover,height: 180,)
  ];
  int currentIndex = 0;
  final controller = PageController(viewportFraction: 0.8, keepPage: true);

  @override
  Widget build(BuildContext context) {
    // 移除外层Scaffold，直接返回页面内容
    return CustomScrollView(
      slivers: [
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(
                    top: 60.0, left: 15.0, right: 10, bottom: 30.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: [
                        Align(
                            alignment: Alignment.centerLeft,
                            child: GestureDetector(
                              // 调用主屏幕的抽屉
                              onTap: () => Scaffold.of(context).openDrawer(),
                              child: Container(
                                height: 20,
                                width: 25,
                                decoration: const BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage('images/app_images/ic_menu.png'),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            )
                        ),
                        // 其余代码保持不变
                      ],
                    ),
                  ],
                ),
              ),
              // 其余代码保持不变
            ],
          ),
        ),
      ],
    );
  }

  // merchantList、clientList等方法保持不变
}

额外提醒 #

• 所有Fragment（CategoryFragment、NotificationFragment等）都不要嵌套Scaffold，统一由主屏幕的Scaffold管理导航栏、抽屉等全局组件。
• 检查导航栏图标对应的图片路径是否正确，避免因资源加载失败导致图标不显示。

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