Flutter实现跳转新页面时保留BottomNavigationBar的方案

这个问题确实是Flutter和iOS原生导航的核心差异——iOS的UITabBarController是作为容器存在，所有子页面都在它的导航层级下；而Flutter默认的全局Navigator会替换整个页面栈，导致底部导航栏跟着消失。下面给你两种实用的解决方案，完美匹配你的需求：

方法一：给每个Tab页面嵌套独立Navigator（最推荐） #

思路很简单：把底部导航栏放在父级Scaffold里，然后给每个Tab对应的页面（A和B）各自嵌套一个Navigator。这样当你在页面A里跳转新页面时，是在A自己的导航栈里操作，父级的底部导航栏完全不受影响，和iOS的行为一致。

完整代码示例 #

首先是首页的TabBar结构：

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

  @override
  State<HomeTabContainer> createState() => _HomeTabContainerState();
}

class _HomeTabContainerState extends State<HomeTabContainer> {
  int _currentTabIndex = 0;

  // 给每个Tab配置独立的导航栈
  final List<Widget> _tabPages = [
    Navigator(
      key: GlobalKey<NavigatorState>(),
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => const PageA(),
        );
      },
    ),
    const PageB(),
  ];

  void _switchTab(int index) {
    setState(() {
      _currentTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabPages[_currentTabIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: _switchTab,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'a'),
          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'b'),
        ],
      ),
    );
  }
}

然后是页面A和跳转的新页面：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('页面A')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 这里用的是页面A所在的嵌套Navigator，所以底部导航栏会保留
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const NewPage()),
            );
          },
          child: const Text('跳转到新页面'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('新页面')),
      body: const Center(
        child: Text('跳转成功！底部导航栏还在哦 😊'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('页面B')),
      body: const Center(child: Text('这是页面B')),
    );
  }
}

注意事项 #

• 给嵌套的Navigator加GlobalKey是为了方便后续跨Tab跳转，或者从子页面操作父级导航时，能直接拿到Navigator的状态。
• 嵌套Navigator的返回按钮行为完全正常，点击会回到页面A，不会影响底部导航栏。

方法二：使用IndexedStack + 页面状态管理（适合简单场景） #

如果你的页面结构比较简单，也可以用IndexedStack来保持所有Tab页面的状态，然后把需要跳转的新页面作为页面A的子组件，通过状态控制显示。不过这种方法扩展性不如嵌套Navigator，适合页面层级少的场景。

简化示例 #

// 在页面A的状态类里维护是否显示新页面
class PageA extends StatefulWidget {
  const PageA({super.key});

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  bool _showNewPage = false;

  @override
  Widget build(BuildContext context) {
    return _showNewPage
        ? const NewPage(onBack: () {
            // 通过回调返回页面A
            setState(() => _showNewPage = false);
          })
        : Scaffold(
            appBar: AppBar(title: const Text('页面A')),
            body: Center(
              child: ElevatedButton(
                onPressed: () => setState(() => _showNewPage = true),
                child: const Text('跳转到新页面'),
              ),
            ),
          );
  }
}

// 新页面需要自定义返回按钮
class NewPage extends StatelessWidget {
  final VoidCallback onBack;
  const NewPage({super.key, required this.onBack});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('新页面'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: onBack,
        ),
      ),
      body: const Center(child: Text('底部导航栏保留')),
    );
  }
}

这种方法不需要嵌套Navigator，但需要自己管理页面切换的状态，返回按钮也需要自定义，适合简单的跳转场景。

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