Flutter项目引入BottomNavBar后AppBar无法显示的解决求助

问题根源很明确：你的BottomNavBar组件内部封装了完整的Scaffold，但在调用页面中你已经使用了一个Scaffold来设置AppBar和bottomNavigationBar。Flutter中嵌套Scaffold会让内层的Scaffold覆盖外层的AppBar，这就是为什么添加BottomNavBar后AppBar消失的原因。

修复方案 #

只需要修改BottomNavBar组件，让它不要返回Scaffold，直接返回底部导航栏对应的容器即可：

import 'package:flutter/material.dart';
import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';
import 'package:tikosocial/constants.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key});

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  var currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    // 移除外层的Scaffold，直接返回底部导航栏的容器
    return Container(
      margin: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(.15),
            blurRadius: 30,
            offset: const Offset(0, 10),
          ),
        ],
        borderRadius: BorderRadius.circular(50),
      ),
      child: SalomonBottomBar(
        currentIndex: currentIndex,
        onTap: (i) => setState(() => currentIndex = i),
        items: [
          /// Home
          SalomonBottomBarItem(
            icon: const Icon(Icons.home_max_outlined),
            title: const Text("Home"),
            selectedColor: kHomeColor,
          ),

          /// Ticket
          SalomonBottomBarItem(
            icon: const Icon(Icons.local_activity_outlined),
            title: const Text("Ticket"),
            selectedColor: kPrimaryColor,
          ),

          /// Search
          SalomonBottomBarItem(
            icon: const Icon(Icons.search),
            title: const Text("Search"),
            selectedColor: kPrimaryColor,
          ),

          /// Profile
          SalomonBottomBarItem(
            icon: const Icon(Icons.account_circle_rounded),
            title: const Text("Account"),
            selectedColor: kHomeColor,
          ),
        ],
      ),
    );
  }
}

调用页面无需修改 #

原来的Home页面代码保持不变，现在运行后，外层Scaffold的AppBar会正常显示，同时底部导航栏也能正常工作。

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