Flutter：使用AppBar返回功能时关闭Dialog并清理Navigator栈

方法一：跳转前主动关闭对话框 #

你可以在跳转到下一页前，先关闭加载对话框——因为showDialog的弹窗是由Navigator管理的，调用Navigator.pop(context)就能直接关闭它：

// 显示加载对话框
showDialog(
  context: context,
  builder: (context) => Center(child: CircularProgressIndicator()),
);

// 模拟异步操作（比如接口请求）完成后跳转
Future.delayed(Duration(seconds: 1), () {
  // 先关闭加载框
  Navigator.pop(context);
  // 再跳转到下一页
  Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
});

方法二：监听页面返回事件主动清理 #

如果是用户点击AppBar返回按钮回到当前页，你可以用WillPopScope包裹页面，监听返回动作，一次性清理所有未关闭的对话框：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      // 弹出当前页面之上的所有路由（包括对话框），只保留初始页面
      Navigator.of(context).popUntil((route) => route.isFirst);
      return true; // 允许页面正常返回
    },
    child: Scaffold(
      appBar: AppBar(title: Text('当前页面')),
      body: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) => Center(child: CircularProgressIndicator()),
          );
          // 跳转下一页
          Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
        },
        child: Text('跳转并显示加载'),
      ),
    ),
  );
}

方法三：用GlobalKey灵活控制对话框 #

如果需要更灵活的控制（比如在页面销毁时自动关闭），可以用GlobalKey绑定对话框的上下文，随时调用关闭：

final GlobalKey<State> _dialogKey = GlobalKey();

// 显示对话框时绑定key
showDialog(
  context: context,
  key: _dialogKey,
  builder: (context) => Center(child: CircularProgressIndicator()),
);

// 封装关闭对话框的方法
void closeDialog() {
  if (_dialogKey.currentContext != null) {
    Navigator.pop(_dialogKey.currentContext!);
  }
}

// 在页面销毁时自动关闭对话框
@override
void dispose() {
  closeDialog();
  super.dispose();
}

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