Flutter独立底部导航组件不显示问题排查与方案咨询

核心问题 #

你把BottomBar封装成了完整的Scaffold，但主页面Scaffold的bottomNavigationBar参数需要的是导航栏组件（比如BottomAppBar），而非另一个Scaffold。嵌套的Scaffold会导致内部底部导航栏被主Scaffold覆盖，无法正常渲染显示。

修正步骤 #

1. 重构BottomBar组件

让它只返回BottomAppBar相关UI，将状态（当前选中索引）和页面切换逻辑交给主页面管理：

class BottomBar extends StatelessWidget {
  final int currentTab;
  final Function(int) onTabTapped;

  const BottomBar({
    Key? key,
    required this.currentTab,
    required this.onTabTapped,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: const CircularNotchedRectangle(),
      notchMargin: 10,
      child: Container(
        height: 60,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            // 左侧导航项
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MaterialButton(
                  minWidth: 40,
                  onPressed: () => onTabTapped(0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.home,
                        color: currentTab == 0 ? Colors.blue : Colors.grey,
                      ),
                      Text(
                        'Home',
                        style: TextStyle(
                          color: currentTab == 0 ? Colors.blue : Colors.grey,
                        ),
                      )
                    ],
                  ),
                ),
                MaterialButton(
                  minWidth: 40,
                  onPressed: () => onTabTapped(1),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.shop,
                        color: currentTab == 1 ? Colors.blue : Colors.grey,
                      ),
                      Text(
                        'Shop',
                        style: TextStyle(
                          color: currentTab == 1 ? Colors.blue : Colors.grey,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
            // 右侧导航项
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MaterialButton(
                  minWidth: 40,
                  onPressed: () => onTabTapped(2),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.wallet,
                        color: currentTab == 2 ? Colors.blue : Colors.grey,
                      ),
                      Text(
                        'Wallet', // 修复原文字错误
                        style: TextStyle(
                          color: currentTab == 2 ? Colors.blue : Colors.grey, // 修复原索引判断错误
                        ),
                      )
                    ],
                  ),
                ),
                MaterialButton(
                  minWidth: 40,
                  onPressed: () => onTabTapped(3),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.people,
                        color: currentTab == 3 ? Colors.blue : Colors.grey,
                      ),
                      Text(
                        'People', // 修复原文字错误
                        style: TextStyle(
                          color: currentTab == 3 ? Colors.blue : Colors.grey,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

2. 修改主页面代码

在主页面中管理页面状态和切换逻辑，将BottomBar作为bottomNavigationBar参数传入：

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int currentTab = 0;
  final PageStorageBucket bucket = PageStorageBucket();
  late Widget currentScreen;

  final List<Widget> screens = const [
    HomePage(),
    ShopPage(),
    WalletPage(), // 对应索引2
    PeoplePage(), // 对应索引3
  ];

  @override
  void initState() {
    super.initState();
    currentScreen = screens[currentTab];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        child: currentScreen,
        bucket: bucket,
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomBar(
        currentTab: currentTab,
        onTabTapped: (index) {
          setState(() {
            currentTab = index;
            currentScreen = screens[index];
          });
        },
      ),
    );
  }
}

正确封装思路 #

• 单一职责：底部导航栏只负责展示导航项、触发点击事件，状态管理（当前选中项、页面切换）交给父组件处理。
• 解耦复用：通过参数传递当前选中状态和回调函数，让BottomBar可以在不同页面复用，无需关心具体页面内容。
• 避免嵌套Scaffold：Scaffold是页面级容器，不应作为另一个Scaffold的bottomNavigationBar，否则会导致布局层级混乱。

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