Flutter：使用Drawer菜单实现页面导航的问题咨询

一、先解决页面叠加的问题：替换当前页面而非新增 #

你现在用Navigator.push会把新页面加到导航栈顶部，旧页面仍留在栈中，所以会出现叠加的情况。要实现替换效果，推荐这两种方法：

方法1：使用pushReplacement直接替换当前页面

这个方法会把当前页面从导航栈中移除，再推入新页面。如果是从首页（MyJobs）第一次切换，点击返回会直接退出应用；如果是从其他页面切换，返回会回到栈里的上一个页面。修改菜单项代码如下：

ListTile(
  title: Text('Time Off Requests'),
  leading: Icon(Icons.timer_off, color: Colors.redAccent),
  onTap: () {
    Navigator.of(context).pop(); // 先关闭Drawer
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (BuildContext context) => TimeOffRequests()),
    );
  },
);

方法2：使用pushAndRemoveUntil保留根页面

如果你希望切换页面后，点击返回能回到首页（MyJobs）而非退出应用，可以用这个方法，它会保留栈的第一个页面（根页面），移除中间的所有页面后推入新页面：

ListTile(
  title: Text('Time Off Requests'),
  leading: Icon(Icons.timer_off, color: Colors.redAccent),
  onTap: () {
    Navigator.of(context).pop();
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (context) => TimeOffRequests()),
      (Route<dynamic> route) => route.isFirst, // 仅保留栈的第一个页面
    );
  },
);

二、关于你提到的Web式页面切换思路：完全可行！ #

这种通过setState切换主体Widget的方式很适合不需要复杂返回栈逻辑的场景，不需要依赖Navigator的导航栈，直接在一个容器页面中维护当前显示的页面即可。具体实现代码如下：

1. 创建一个容器页面作为应用入口

class MainContainer extends StatefulWidget {
  @override
  _MainContainerState createState() => _MainContainerState();
}

class _MainContainerState extends State<MainContainer> {
  // 维护当前显示的页面Widget
  Widget _currentPage = MyJobs();

  // 页面切换方法
  void _switchPage(Widget newPage) {
    setState(() {
      _currentPage = newPage;
    });
    Navigator.of(context).pop(); // 切换后关闭Drawer
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('我的应用')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('菜单'),
            ),
            ListTile(
              title: Text('我的工作'),
              leading: Icon(Icons.work),
              onTap: () => _switchPage(MyJobs()),
            ),
            ListTile(
              title: Text('请假申请'),
              leading: Icon(Icons.timer_off, color: Colors.redAccent),
              onTap: () => _switchPage(TimeOffRequests()),
            ),
            // 其他菜单项可以继续添加
          ],
        ),
      ),
      body: _currentPage, // 直接渲染当前页面
    );
  }
}

2. 修改应用入口

void main() {
  runApp(
    MaterialApp(
      home: MainContainer(), // 用容器页面作为首页
    ),
  );
}

这种方式的优势是页面切换更轻量化，没有导航栈的额外开销；缺点是如果需要页面间的返回历史逻辑，得自己维护页面栈，不如Navigator原生栈方便。你可以根据自己的业务需求选择合适的方案。

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