Flutter：如何用Material.dart实现带嵌套导航的底部导航栏且规避嵌套Scaffold问题？

已经实现了BottomNavigationBar和嵌套导航，但顶层页面的每个新页面都必须配置Scaffold。已知嵌套Scaffold不推荐使用，而且嵌套时会出现resizeToAvoidBottomInset相关问题。

我的Tab导航器代码： #

@override
Widget build(BuildContext context) {
  Widget child;
  if (tabItem == "Home") {
    child = const Home();
  } else if (tabItem == 'screen2') {
    child = Screen2();
  } else if (tabItem == 'screen3') {
    child = const Screen3();
  } else if (tabItem == 'screen4') {
    child = const Screen4(0);
  } else if (tabItem == 'Screen5') {
     child= Screen5();
  } else {
    child = const Home();
  }

  return Navigator(
    key: navigatorKey,
    onGenerateRoute: (routeSettings) {
      return MaterialPageRoute(builder: (context) => child);
    },
  );
}

需求说明： #

• 仅使用Material.dart实现，不想用Cupertino或自定义导航栏
• 试过在顶层MaterialApp内嵌套MaterialApp，能运行但想找更优方案

优化方案 #

核心思路就是只保留顶层一个Scaffold，把BottomNavigationBar放在这个顶层Scaffold里，所有Tab页面（包括跳转的子页面）都不再单独套Scaffold，只返回页面的核心内容组件。

具体实现步骤：

1. 做一个顶层容器页面（比如MainPage），它包含唯一的Scaffold，bottomNavigationBar就是你已经实现的底部导航栏，body部分用IndexedStack管理不同Tab对应的嵌套Navigator（保证切换Tab时页面状态不丢失）。
2. 把原来每个Tab页面（Home、Screen2等）里的Scaffold删掉，只保留页面的内容部分，比如把Home改成HomeContent，直接返回页面的布局组件。
3. 调整嵌套Navigator的路由生成逻辑，确保跳转的子页面也不包含Scaffold。

示例代码

顶层容器页面

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

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

class _MainPageState extends State<MainPage> {
  int _selectedIndex = 0;
  // 给每个Tab的Navigator分配独立的key，方便后续操作路由
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  final List<String> _tabItems = ["Home", "screen2", "screen3", "screen4", "Screen5"];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack保持Tab切换时的页面状态
      body: IndexedStack(
        index: _selectedIndex,
        children: _tabItems.map((tabItem) {
          int tabIndex = _tabItems.indexOf(tabItem);
          return _buildTabNavigator(tabItem, _navigatorKeys[tabIndex]);
        }).toList(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Screen2'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: 'Screen3'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Screen4'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Screen5'),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

  Widget _buildTabNavigator(String tabItem, GlobalKey<NavigatorState> navigatorKey) {
    Widget child;
    // 这里返回的是去掉Scaffold的内容组件
    switch (tabItem) {
      case "Home":
        child = const HomeContent();
      case "screen2":
        child = const Screen2Content();
      case "screen3":
        child = const Screen3Content();
      case "screen4":
        child = const Screen4Content(0);
      case "Screen5":
        child = const Screen5Content();
      default:
        child = const HomeContent();
    }

    return Navigator(
      key: navigatorKey,
      onGenerateRoute: (routeSettings) {
        // 跳转子页面时同样返回无Scaffold的组件
        if (routeSettings.name == '/detail') {
          return MaterialPageRoute(builder: (context) => const DetailContent());
        }
        return MaterialPageRoute(builder: (context) => child);
      },
    );
  }
}

示例内容组件（以Home为例）

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          Navigator.pushNamed(context, '/detail');
        },
        child: const Text('跳转到详情页'),
      ),
    );
  }
}

方案优势

• 彻底避免嵌套Scaffold带来的resizeToAvoidBottomInset冲突、AppBar重叠等布局问题
• 所有页面共享顶层Scaffold，布局风格统一，符合Material设计规范
• 用IndexedStack保存Tab状态，切换Tab不会重新加载页面，体验更好

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