Flutter Web实现全局共用Drawer的技术方案咨询

你的核心问题是每次用Navigator.push切换页面时，新页面的Scaffold没有继承原有的Drawer和AppBar，导致全局共用的布局丢失。下面给出两种适合新手的实现方案，效果类似Android的NavHost：

方案一：基于索引切换的固定外层布局 #

这种方式最简单，把Drawer和AppBar放在外层Scaffold中，内部通过索引切换页面组件，全程不会重建外层布局，确保Drawer和AppBar始终存在。

步骤1：创建全局主布局MainScaffold #

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

  @override
  State<MainScaffold> createState() => _MainScaffoldState();
}

class _MainScaffoldState extends State<MainScaffold> {
  // 当前选中的页面索引
  int _selectedPageIndex = 0;

  // 页面列表，和侧边栏选项一一对应
  final List<Widget> _pages = const [
    DashboardScreen(),
    UserScreen(),
  ];

  // 侧边栏选项点击回调
  void _onMenuItemSelected(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
    // Web端点击后自动关闭Drawer，提升交互体验
    if (Scaffold.of(context).isDrawerOpen) {
      Scaffold.of(context).closeDrawer();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 全局共用的AppBar
      appBar: AppBar(
        title: const Text('Tapchi Admin Panel'),
      ),
      // 全局共用的Drawer
      drawer: SideMenu(onItemSelected: _onMenuItemSelected),
      // 根据索引切换页面内容
      body: _pages[_selectedPageIndex],
    );
  }
}

步骤2：修改SideMenu添加回调 #

把原来的Navigator.push替换成回调通知主布局切换页面：

class SideMenu extends StatelessWidget {
  final Function(int) onItemSelected;

  const SideMenu({super.key, required this.onItemSelected});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          const DrawerHeader(child: Icon(Icons.android)),
          ListTile(
            title: const Text('dashboard'),
            leading: const Icon(Icons.dashboard),
            onTap: () => onItemSelected(0),
          ),
          ListTile(
            title: const Text('users'),
            leading: const Icon(Icons.person),
            onTap: () => onItemSelected(1),
          ),
        ],
      ),
    );
  }
}

步骤3：修改MyApp的入口页面 #

把原来的DashboardScreen替换成新的MainScaffold：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tapchi Admin Panel',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: bgColor,
        textTheme: GoogleFonts.poppinsTextTheme(
          Theme.of(context).textTheme,
        ).apply(bodyColor: Colors.white),
        canvasColor: secondaryColor,
      ),
      home: const MainScaffold(), // 替换为全局主布局
    );
  }
}

方案二：基于命名路由的嵌套Navigator #

如果你的页面需要传递参数或者有更复杂的路由逻辑，可以用嵌套Navigator的方式，外层Scaffold保留Drawer和AppBar，内部用命名路由管理页面切换。

步骤1：修改MainScaffold的body为嵌套Navigator #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tapchi Admin Panel')),
      drawer: const SideMenu(),
      // 嵌套Navigator管理页面内容
      body: Navigator(
        initialRoute: '/dashboard',
        onGenerateRoute: (settings) {
          Widget page;
          switch (settings.name) {
            case '/dashboard':
              page = const DashboardScreen();
              break;
            case '/users':
              // 支持传递参数，比如UserScreen(id: settings.arguments as String)
              page = const UserScreen();
              break;
            default:
              page = const DashboardScreen();
          }
          return MaterialPageRoute(builder: (context) => page);
        },
      ),
    );
  }
}

步骤2：修改SideMenu的点击逻辑 #

用pushReplacementNamed替换push，避免路由栈堆积：

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          const DrawerHeader(child: Icon(Icons.android)),
          ListTile(
            title: const Text('dashboard'),
            leading: const Icon(Icons.dashboard),
            onTap: () {
              Navigator.of(context).pushReplacementNamed('/dashboard');
              Scaffold.of(context).closeDrawer();
            },
          ),
          ListTile(
            title: const Text('users'),
            leading: const Icon(Icons.person),
            onTap: () {
              Navigator.of(context).pushReplacementNamed('/users');
              Scaffold.of(context).closeDrawer();
            },
          ),
        ],
      ),
    );
  }
}

为什么原来的方式会丢失Drawer？ #

你之前用Navigator.push会新建一个Scaffold页面，原来带Drawer的Scaffold会被压入路由栈，新页面的Scaffold没有配置Drawer和AppBar，所以自然看不到。而上面的两种方案都是把Drawer和AppBar固定在最外层，内部只切换页面内容，完美解决这个问题。

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