实现可正常导航的Flutter Navigation Drawer

这个场景确实太常见了，你想的自定义Navigator路子完全是对的！谷歌旗下很多应用（比如Gmail、Drive）的侧边栏逻辑就是这么实现的——侧边栏常驻不动，仅内容区维护自己的独立导航栈。你遇到的核心问题是怎么从Drawer里拿到body内Navigator的状态，下面给你捋清楚具体实现步骤和示例代码：

核心思路 #

通过GlobalKey<NavigatorState>来关联body里的自定义Navigator，这样就能在Drawer的点击事件中直接调用这个Navigator的导航方法；同时配合WillPopScope拦截系统返回键，让局部Navigator优先处理返回逻辑，完美保留导航栈的特性。

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '局部导航示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MainScaffold(),
    );
  }
}

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

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

class _MainScaffoldState extends State<MainScaffold> {
  // 定义全局Key，用来获取body内Navigator的状态
  final GlobalKey<NavigatorState> _bodyNavigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      // 拦截系统返回键：先让局部Navigator处理返回，没有页面可返回时再退出当前页面
      onWillPop: () async {
        if (_bodyNavigatorKey.currentState?.canPop() ?? false) {
          _bodyNavigatorKey.currentState?.pop();
          return false;
        }
        return true;
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('侧边栏局部导航')),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(color: Colors.blue),
                child: Text('侧边菜单'),
              ),
              ListTile(
                title: const Text('首页'),
                onTap: () {
                  // 先关闭Drawer，再执行局部导航
                  Navigator.of(context).pop();
                  _bodyNavigatorKey.currentState?.pushReplacement(
                    MaterialPageRoute(builder: (context) => const HomeView()),
                  );
                },
              ),
              ListTile(
                title: const Text('设置页'),
                onTap: () {
                  Navigator.of(context).pop();
                  _bodyNavigatorKey.currentState?.push(
                    MaterialPageRoute(builder: (context) => const SettingsView()),
                  );
                },
              ),
              ListTile(
                title: const Text('详情页'),
                onTap: () {
                  Navigator.of(context).pop();
                  _bodyNavigatorKey.currentState?.push(
                    MaterialPageRoute(builder: (context) => const DetailView(id: 1)),
                  );
                },
              ),
            ],
          ),
        ),
        // body区域使用自定义Navigator作为内容容器
        body: Navigator(
          key: _bodyNavigatorKey,
          initialRoute: '/',
          onGenerateRoute: (settings) {
            WidgetBuilder builder;
            switch (settings.name) {
              case '/':
                builder = (context) => const HomeView();
                break;
              case '/settings':
                builder = (context) => const SettingsView();
                break;
              case '/detail':
                final id = settings.arguments as int;
                builder = (context) => DetailView(id: id);
                break;
              default:
                throw Exception('未知路由: ${settings.name}');
            }
            return MaterialPageRoute(builder: builder);
          },
        ),
      ),
    );
  }
}

// 示例页面：首页
class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('首页内容', style: TextStyle(fontSize: 20)),
          ElevatedButton(
            onPressed: () {
              // 页面内部也能直接使用Navigator.of(context)调用局部导航
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => const DetailView(id: 2)),
              );
            },
            child: const Text('跳转到详情页'),
          ),
        ],
      ),
    );
  }
}

// 示例页面：设置页
class SettingsView extends StatelessWidget {
  const SettingsView({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('设置页面内容', style: TextStyle(fontSize: 20)),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('返回上一页'),
          ),
        ],
      ),
    );
  }
}

// 示例页面：详情页
class DetailView extends StatelessWidget {
  final int id;
  const DetailView({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('详情页 $id', style: TextStyle(fontSize: 20)),
    );
  }
}

关键细节说明 #

• GlobalKey的作用：_bodyNavigatorKey相当于给body里的Navigator贴了个“标签”，让我们能在Drawer的点击事件中直接调用它的push/pop等方法，实现局部导航。
• WillPopScope拦截返回键：默认系统返回键会操作整个App的导航栈，这里我们让它先检查局部Navigator是否有可返回的页面，如果有就先返回局部页面，没有再退出当前页面。
• Drawer点击后关闭Drawer：每次点击Drawer选项后，先调用Navigator.of(context).pop()关闭Drawer，再执行局部导航，避免Drawer遮挡新页面，提升用户体验。
• 页面内部的导航：在body的页面中（比如HomeView），直接使用Navigator.of(context)就能拿到局部Navigator的状态，和普通导航用法完全一致，非常顺手。

这种方案完美满足你的需求：侧边栏常驻，仅body区域切换视图，同时维护自己的导航栈，返回键能正确回到上一个body页面。

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