如何使用Navigator仅在屏幕局部区域push新Widget？

要实现新视图仅替换底部区域，核心是给底部部分单独创建一个独立的Navigator，而非使用MaterialApp全局的Navigator（全局Navigator默认会全屏替换页面）。

具体修改步骤： #

1. 重构BottomView，内部嵌套Navigator
   将原来的BottomView改为包含一个Navigator作为根组件，由这个Navigator负责底部区域的页面切换：

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

  @override
  Widget build(BuildContext context) {
    // 底部区域专属Navigator
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        Widget page;
        switch (settings.name) {
          case '/':
            // 原BottomView的内容，作为底部初始页面
            page = _BottomInitialPage(context);
            break;
          case newViewRoute:
            // 要跳转的新页面
            page = const NewView();
            break;
          default:
            page = _BottomInitialPage(context);
        }
        // 用MaterialPageRoute实现页面切换动画
        return MaterialPageRoute(builder: (_) => page);
      },
    );
  }

  // 原BottomView的按钮页面
  Widget _BottomInitialPage(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 此时Navigator.of(context)拿到的是底部专属Navigator的上下文
            Navigator.of(context).pushNamed(newViewRoute);
          },
          child: const Text('打开底部新页面'),
        ),
      ),
    );
  }
}

2. 调整NewView（可选）
   根据底部区域的空间，可给NewView添加返回按钮，确保能回到原底部页面：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('这是底部区域的新页面'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('返回'),
            ),
          ],
        ),
      ),
    );
  }
}

原理说明： #

• MaterialApp提供的全局Navigator上下文覆盖整个屏幕，所以原来的pushNamed会全屏替换页面。
• 给底部区域单独嵌套Navigator后，Navigator.of(context)在底部页面中拿到的是这个局部Navigator的上下文，页面切换只会限制在底部的Expanded区域内，顶部TopView会保持不变。

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