页面跳转后如何让Flutter Alert Dialog自动消失？

这个问题我太熟悉啦！你现在的问题核心很明确：点击OK按钮时只执行了页面跳转，但没有关闭当前的Alert Dialog——Flutter里的showDialog是把弹窗加入导航栈的，所以当你从相机页面返回时，原来的弹窗还留在栈里，自然就又出现了。

最简单的修复方法：先关弹窗，再跳转 #

只需要在跳转前调用Navigator.pop(context)关闭弹窗，代码修改如下：

Future<void> _handlePhoto(BuildContext context) {
  return showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return CupertinoAlertDialog(
        title: Text('Please Position Crosshair'),
        content: const Text(
          'Before detecting cancer, ensure your focus area is centered.'),
        actions: <Widget>[
          FlatButton(
            child: Text('OK'),
            onPressed: () {
              // 第一步：关闭当前的Alert Dialog
              Navigator.of(context).pop();
              // 第二步：跳转到相机页面
              Navigator.of(context).pushNamed(
                '/camerapage',
                arguments: cameras,
              );
            },
          ),
        ],
      );
    },
  );
}

原理说明 #

• Navigator.pop(context)在这里作用于弹窗的上下文，会把弹窗从导航栈中移除；
• 之后再执行pushNamed，新页面会被加到栈顶，当你从相机页面返回时，栈顶的相机页面被移除，回到的是原来的页面（而不是弹窗）。

这样修改后，返回原页面时弹窗就不会再出现啦！

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