如何从Flutter AppBar的actions项中触发执行Drawer相关代码?
解决方案
首先明确:完全支持从AppBar的actions组件中手动触发Drawer打开,只要你的Scaffold已经配置了drawer属性,调用Scaffold提供的API即可实现,有两种常用实现方式:
方式1:通过上下文获取Scaffold状态触发
直接在menu按钮的onPressed回调里调用openDrawer方法即可,代码修改如下:
IconButton( icon: Icon(Icons.menu), onPressed: () { // 打开左侧抽屉 Scaffold.of(context).openDrawer(); // 如果是配置在右侧的EndDrawer,调用 openEndDrawer() 即可 } ),
注意:如果运行时提示
Scaffold.of() called with a context that does not contain a Scaffold,说明当前context无法向上寻找到Scaffold节点,换成下面的GlobalKey方式即可解决。
方式2:通过GlobalKey绑定Scaffold触发(更稳定,无context依赖问题)
第一步:在页面的State类中定义GlobalKey
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
第二步:将key绑定到你的Scaffold组件上
Scaffold( key: _scaffoldKey, // 绑定定义好的key drawer: const YourDrawerWidget(), // 保留你原本配置的Drawer组件 appBar: // 你的AppBar代码保持不变 // 其余Scaffold配置不需要修改 )
第三步:在menu按钮的onPressed中通过key调用打开Drawer
IconButton( icon: Icon(Icons.menu), onPressed: () { _scaffoldKey.currentState?.openDrawer(); // 打开右侧抽屉调用 _scaffoldKey.currentState?.openEndDrawer(); } ),
内容的提问来源于stack exchange,提问作者rozerro
相关产品推荐
相关产品推荐

