如何移除Flutter Drawer组件的顶部汉堡按钮？

嘿，这个需求我之前做项目时刚好遇到过，其实解决起来很直观，核心就是控制AppBar的默认leading组件，再配合Scaffold的状态来实现自定义触发逻辑。下面分步骤给你说明：

1. 移除默认的汉堡按钮 #

当你给Scaffold设置了drawer或endDrawer属性时，AppBar会自动在左侧（drawer）或右侧（endDrawer）生成汉堡按钮。要去掉它，只需要显式给AppBar的leading属性赋值为null，这样就能覆盖默认的汉堡图标了。

2. 保留侧滑打开Drawer的功能 #

不用担心，即使去掉了汉堡按钮，Scaffold的侧滑打开逻辑依然默认生效：

• 对于drawer：从屏幕左边缘向右滑动即可打开
• 对于endDrawer：从屏幕右边缘向左滑动即可打开
  这个不需要额外写代码，Flutter已经帮我们处理好了。

3. 添加自定义按钮打开Drawer #

如果需要用自定义按钮（比如放在AppBar的右侧，或者页面其他位置）来打开Drawer，我们需要借助GlobalKey来获取Scaffold的状态，然后调用对应的打开方法。

完整代码示例 #

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(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  // 定义GlobalKey来获取Scaffold状态
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey, // 给Scaffold绑定key
      appBar: AppBar(
        title: const Text("无汉堡按钮的Drawer示例"),
        leading: null, // 移除默认汉堡按钮
        actions: [
          // 添加自定义按钮，点击打开Drawer
          IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              // 调用openDrawer打开左侧Drawer，endDrawer用openEndDrawer()
              _scaffoldKey.currentState?.openDrawer();
            },
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text("Drawer头部"),
            ),
            ListTile(
              title: Text("菜单项1"),
            ),
            ListTile(
              title: Text("菜单项2"),
            ),
          ],
        ),
      ),
      body: const Center(
        child: Text("主页面内容"),
      ),
    );
  }
}

关键说明 #

• GlobalKey<ScaffoldState>：用来跨组件获取Scaffold的状态，这样我们就能在自定义按钮的点击事件里调用openDrawer()或openEndDrawer()方法。
• 如果你用的是endDrawer，只需要把openDrawer()换成openEndDrawer()，同时leading: null依然有效（endDrawer的默认按钮在右侧，同样会被覆盖）。

这样操作后，你就可以完全去掉默认的汉堡按钮，只保留侧滑和自定义按钮打开Drawer的方式啦！

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