Flutter中AppBar的drawer图标能否自定义？如何加背景圆及用自定义图标触发drawer

方案1：复用原生AppBar直接替换抽屉图标（最优方案） #

Flutter原生AppBar完全支持自定义默认的抽屉图标，无需废弃原生AppBar和drawer逻辑，直接配置leading参数即可实现你要的圆形背景效果：

• 首先给当前页面的Scaffold绑定GlobalKey<ScaffoldState>，用于控制抽屉的开闭
• 给AppBar的leading传入自定义的带圆形背景的图标组件，点击事件中调用打开抽屉的方法即可

示例代码：

// 页面内定义Scaffold绑定用的key
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    drawer: const CustomDrawer(), // 替换为你自己的抽屉组件
    appBar: AppBar(
      automaticallyImplyLeading: true, // 保持默认开启即可，手动关闭过的话重新打开
      // 自定义抽屉图标，带圆形背景
      leading: GestureDetector(
        onTap: () => _scaffoldKey.currentState?.openDrawer(),
        child: Container(
          margin: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.grey.shade200, // 自定义圆形背景色
            shape: BoxShape.circle,
          ),
          child: const Icon(Icons.menu, color: Colors.black87),
        ),
      ),
      title: const Text("页面标题"),
      // 其余AppBar配置保持不变
    ),
    body: const YourPageBody(),
  );
}

方案2：已完全自定义AppBar的场景 #

如果你已经废弃原生AppBar自己实现了顶部导航栏，只需要保证自定义导航栏和页面的Scaffold绑定同一个GlobalKey<ScaffoldState>，在自定义图标的点击事件中调用_scaffoldKey.currentState?.openDrawer()即可唤起抽屉，不需要依赖原生AppBar的逻辑。

补充说明 #

如果你的自定义图标组件在Scaffold的子节点树内，也可以不用GlobalKey，直接通过上下文调用：

onTap: () => Scaffold.of(context).openDrawer()

GlobalKey的方式不受上下文层级限制，适配性更强。

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