Flutter：HomeScreen无法显示MainScreen的AppBar和BottomNavigationBar求助

1. 修正MainScreen的核心结构 #

MainScreen作为外层容器，需要统一承载AppBar、BottomNavigationBar和页面内容，子页面（如HomeScreen）不应单独嵌套Scaffold，否则会覆盖外层的导航栏配置。

示例代码：

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedTabIndex = 0;

  // 页面列表：子页面仅返回内容，不包含Scaffold
  final List<Widget> _pageList = const [
    HomeScreen(),
    // 其他页面如ProfileScreen()等
  ];

  void _onTabTap(int index) {
    setState(() {
      _selectedTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('应用标题'),
      ),
      // 直接将选中的子页面作为body内容
      body: _pageList[_selectedTabIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex,
        onTap: _onTabTap,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

2. 调整HomeScreen的实现 #

HomeScreen只需返回页面核心内容，无需包裹Scaffold：

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 直接返回内容组件，比如ListView、Column等
    return ListView(
      padding: const EdgeInsets.all(16),
      children: const [
        Text('首页内容区域'),
        SizedBox(height: 16),
        Text('更多内容展示...'),
      ],
    );
  }
}

3. 特殊场景兼容（若HomeScreen必须用Scaffold） #

如果HomeScreen需要使用Scaffold的特殊功能（如浮动按钮、抽屉），可以保留Scaffold但不设置appBar和bottomNavigationBar，让外层MainScreen的导航栏生效：

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 不设置appBar和bottomNavigationBar
      body: ListView(
        children: const [Text('带浮动按钮的首页')],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. 恢复之前的实现 #

如果之前的代码被误修改导致无法运行，优先通过版本控制工具（如Git）回退到历史正确版本；若没有版本控制，按照上述结构重新搭建即可——核心原则是导航栏由外层MainScreen统一管理，子页面仅负责内容渲染。

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