Flutter点击悬浮组件实现侧边栏(Drawer)正常显示的方法

问题原因 #

你当前通过Navigator.push(MaterialPageRoute(builder: (context) => SideBar()))将SideBar作为全屏页面跳转，没有利用Flutter Scaffold自带的抽屉组件交互逻辑，因此无法触发侧边栏滑出动画和半透明背景效果。

解决方案 #

1. 为Scaffold添加全局Key

在Scaffold所在的State类中定义全局Key，用于控制抽屉的打开状态：

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

将该Key绑定到Scaffold组件上：

Scaffold(
  key: _scaffoldKey,
  drawer: SideBar(), // 已正确绑定SideBar作为抽屉
  body: // 你的页面内容
)

2. 修改浮动菜单的点击事件

删除原有的页面跳转代码，改为触发Scaffold的抽屉打开方法：

CircularMenuItem(
  image: Image.asset(
    "assets/images/icons/settings.png",
    scale: 13,
  ),
  onTap: () {
    // 触发侧边栏滑出动画
    _scaffoldKey.currentState?.openDrawer();
  },
  color: Colors.transparent, 
),

3. 调整侧边栏宽度为屏幕60%

在SideBar组件中，将Drawer的宽度参数修改为屏幕宽度的60%：

return Drawer(
  width: screenwidth * 0.6, // 从0.5改为0.6以满足需求
  child: ListView(
    children: [
      // 你的侧边栏内容
    ],
  ),
);

补充说明 #

如果CircularMenuItem处于Scaffold的直接子树中，也可以省略GlobalKey，直接调用：

Scaffold.of(context).openDrawer();

但使用GlobalKey的方式更稳定，尤其适用于组件层级较深的场景。

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