Flutter中如何在Dashboard的WillPop事件中实现侧边抽屉关闭逻辑？

核心修改思路 #

通过GlobalKey<ScaffoldState>获取Scaffold的状态，优先判断抽屉是否打开：若打开则关闭抽屉，否则弹出退出应用的确认对话框。

具体修改步骤 #

1. 添加Scaffold全局键 #

在_DashboardState类中定义全局键，用于监听Scaffold的抽屉状态：

class _DashboardState extends State<Dashboard> {
  String _currentPage = 'HomePage';
  // 新增全局键
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    _currentPage = widget.initialPage;
  }
  // ... 其他原有代码
}

2. 给Scaffold绑定全局键 #

修改build方法中的Scaffold组件，添加key属性关联全局键：

return WillPopScope(
  onWillPop: _onWillPop,
  child: Scaffold(
    key: _scaffoldKey, // 绑定全局键
    drawer: const SideDrawer(),
    body: tabs[_currentPage],
    // ... 底部导航栏原有代码
  ),
);

3. 更新返回键处理逻辑 #

修改_onWillPop方法，增加抽屉状态判断分支：

Future<bool> _onWillPop() async {
  // 优先检查抽屉是否打开
  if (_scaffoldKey.currentState!.isDrawerOpen) {
    // 关闭抽屉，阻止默认返回行为
    Navigator.of(context).pop();
    return false;
  } else {
    // 抽屉未打开时，弹出退出确认对话框
    return (await showDialog(
      context: context,
      builder: (context) => AlertDialog(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(12.0))),
        backgroundColor: AppColors.whiteShadeColor,
        content: const Text(
            "Are you sure?\nDo you want to exit an App",
            style: TextStyle(
                fontWeight: FontWeight.bold,
                color: AppColors.blackColor
            )
        ),
        actions: <Widget>[
          TextButton(
            child: const Text(
              "No",
              style: TextStyle(
                  color: AppColors.darkBlueColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 14
              ),
            ),
            onPressed: () {
               Navigator.of(context).pop(false);
            },
          ),
          TextButton(
            child: const Text(
              "Yes",
              style: TextStyle(
                  color: AppColors.redColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 14
              ),
            ),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          )
        ],
      )
    )) ?? false;
  }
}

效果说明 #

• 抽屉打开状态下，按下返回键会直接关闭抽屉，不会触发退出确认
• 抽屉关闭状态下，按下返回键才会弹出退出应用的确认对话框
• 修正了原代码中对话框文本的换行问题，确保显示格式正确

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