Flutter中Navigator.push新页面无法铺满全屏问题求助

你遇到的这个现象确实有点奇怪——第一次用Navigator.push跳转时新页面只占2/3屏幕，返回后再跳转就正常了。这种情况大概率是因为你调用push时的context不是来自全屏页面的根导航器上下文（比如当前页面是从弹窗、底部Sheet这类局部容器里打开的，它的context范围被限制在局部区域），导致新路由的页面继承了这个约束。不过既然你明确想要替换当前路由、让新页面完全覆盖旧页面且移除旧路由，那Navigator.pushReplacement绝对是更合适的选择，正好匹配你的需求，还能避免路由栈冗余。

正确使用Navigator.pushReplacement的代码 #

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const MainPage()),
);

这个方法会直接把当前的旧路由从导航栈中移除，同时将MainPage添加为新的栈顶路由。这样新页面会完全铺满屏幕，而且用户点击返回按钮时不会回到之前的旧页面（因为旧路由已经被彻底移除了）。

如果你的场景是需要清空整个路由栈（比如从登录页跳转到主页，完全不让用户返回登录页），还可以用Navigator.pushAndRemoveUntil来实现：

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => const MainPage()),
  (route) => false, // 这个条件表示移除所有之前的路由，只保留新页面
);

再回头说下你之前push的问题：第一次跳转时的半屏现象，本质是上下文范围的问题。当你从局部容器（比如BottomSheet）里调用push，传递的context属于那个局部容器，新路由的页面会被约束在容器的范围内；返回后你回到了全屏页面，此时的context是根导航器的上下文，再跳转自然就正常了。而用pushReplacement时，只要确保使用的是全屏页面的根context，就能直接避免这个问题。

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