Flutter中点击按钮关闭Drawer的实现方法（含右上角关闭按钮场景）

嘿，关于Flutter里关闭Drawer的问题，我给你整理两种靠谱的实现方式，不管是默认逻辑还是自定义右上角按钮都能搞定：

一、基础方案：利用Scaffold内置方法关闭 #

Flutter的Scaffold组件本身提供了关闭Drawer的方法，你只需要在Drawer内部的按钮中调用它就行。不过要注意context的作用域——得确保你用的context是Scaffold的子上下文，不然会找不到对应的ScaffoldState。

代码示例： #

Scaffold(
  appBar: AppBar(title: Text("Drawer 演示")),
  drawer: Drawer(
    child: Column(
      children: [
        // 自定义Drawer头部，右上角放置关闭按钮
        DrawerHeader(
          child: Align(
            alignment: Alignment.topRight,
            child: IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                // 调用Scaffold的closeDrawer方法关闭抽屉
                Scaffold.of(context).closeDrawer();
              },
            ),
          ),
          decoration: BoxDecoration(color: Colors.lightBlue),
        ),
        ListTile(title: Text("菜单选项1")),
        ListTile(title: Text("菜单选项2")),
      ],
    ),
  ),
  body: Center(child: Text("主页面内容")),
);

如果遇到Scaffold.of(context)找不到的情况，给Drawer套个Builder组件就能解决，它会提供正确的子context：

drawer: Builder(
  builder: (context) => Drawer(
    child: Column(
      children: [
        DrawerHeader(
          child: Align(
            alignment: Alignment.topRight,
            child: IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                Scaffold.of(context).closeDrawer();
              },
            ),
          ),
        ),
        // 其他菜单组件
      ],
    ),
  ),
)

二、灵活方案：用GlobalKey全局控制 #

如果你需要在Drawer外部的组件（比如AppBar的按钮）也能控制Drawer开关，或者不想纠结context的问题，用GlobalKey是更省心的选择：

代码示例： #

// 定义全局Key，用来绑定Scaffold
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey, // 给Scaffold绑定全局Key
    appBar: AppBar(
      title: Text("Drawer 演示"),
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          // 打开Drawer
          _scaffoldKey.currentState?.openDrawer();
        },
      ),
    ),
    drawer: Drawer(
      child: Column(
        children: [
          DrawerHeader(
            child: Align(
              alignment: Alignment.topRight,
              child: IconButton(
                icon: Icon(Icons.close),
                onPressed: () {
                  // 通过全局Key调用closeDrawer关闭抽屉
                  _scaffoldKey.currentState?.closeDrawer();
                },
              ),
            ),
          ),
          ListTile(title: Text("菜单选项1")),
        ],
      ),
    ),
    body: Center(child: Text("主页面内容")),
  );
}

这两种方法都能完美实现点击自定义关闭按钮关闭Drawer的需求，你可以根据自己的场景选合适的～

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