Flutter调用自定义BottomNavigation后仅显示底部导航栏问题求助

问题根源 #

你的BottomNavigation组件返回的是完整的Scaffold，但Scaffold的bottomNavigationBar参数仅需底部导航栏组件（如BottomNavigationBar）。当把一个Scaffold作为另一个Scaffold的bottomNavigationBar时，子Scaffold会占据整个屏幕空间，完全覆盖父Scaffold的AppBar、Drawer等元素。

解决方案 #

修改bottomnavigation.dart，让BottomNavigation直接返回BottomNavigationBar组件，而非嵌套Scaffold。以下是修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';

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

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  // 用于记录当前选中的导航项，支持后续页面切换逻辑
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 此处可添加页面切换逻辑，比如通过Navigator或PageView实现
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      fixedColor: Colors.black,
      elevation: 100,
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(EvaIcons.home, color: Colors.indigo),
          label: 'Home',
          backgroundColor: Colors.white70,
        ),
        BottomNavigationBarItem(
          icon: Icon(EvaIcons.shoppingCart, color: Colors.indigo),
          label: 'Our services',
          backgroundColor: Colors.white70,
        ),
        BottomNavigationBarItem(
          icon: Icon(EvaIcons.bookOpen, color: Colors.indigo),
          label: 'About us',
          backgroundColor: Colors.white70,
        ),
        BottomNavigationBarItem(
          icon: Icon(EvaIcons.phoneCall, color: Colors.indigo),
          label: 'Contact us',
          backgroundColor: Colors.white70,
        ),
        BottomNavigationBarItem(
          icon: Icon(EvaIcons.settings, color: Colors.indigo),
          label: 'Settings',
          backgroundColor: Colors.white70,
        ),
      ],
    );
  }
}

修改说明 #

• 移除了原代码中的main函数（该组件并非应用入口）
• 删除嵌套的Scaffold，直接返回BottomNavigationBar
• 添加_selectedIndex状态和_onItemTapped方法，为后续实现导航切换逻辑预留扩展空间

修改后，home.dart中的代码无需改动，重新运行即可看到父Scaffold的AppBar、Drawer和底部导航栏同时正常显示。

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