Flutter调用showModalBottomSheet/showDialog时组件销毁后上下文错误问题

针对你遇到的Navigator operation requested with a context that does not include a Navigator.错误，以下是几种实用的上下文稳定性处理方案：

1. 使用GlobalKey获取页面级稳定上下文 #

列表项的context属于子Widget，当页面被销毁时会直接失效。可以通过GlobalKey绑定页面的Scaffold，获取全局稳定的页面级上下文：

class FileListPage extends StatefulWidget {
  const FileListPage({super.key});

  @override
  State<FileListPage> createState() => _FileListPageState();
}

class _FileListPageState extends State<FileListPage> {
  final GlobalKey<ScaffoldState> _pageScaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _pageScaffoldKey,
      body: ListView.builder(
        itemBuilder: (_, index) {
          return ListTile(
            onLongPress: () async {
              // 先判断全局上下文是否有效
              if (_pageScaffoldKey.currentContext == null) return;
              
              await showModalBottomSheet(
                context: _pageScaffoldKey.currentContext!,
                backgroundColor: Theme.of(_pageScaffoldKey.currentContext!).cardColor,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                ),
                builder: (bottomSheetContext) {
                  return Wrap(
                    children: [
                      ListTile(
                        title: const Text('删除文件'),
                        onTap: () async {
                          final confirmDelete = await showDialog<bool>(
                            context: bottomSheetContext,
                            builder: (dialogContext) {
                              return AlertDialog(
                                title: const Text('Delete File'),
                                content: const Text('Are you sure you want to delete this file?'),
                                actions: [
                                  TextButton(
                                    onPressed: () => Navigator.pop(dialogContext, false),
                                    child: const Text('取消'),
                                  ),
                                  TextButton(
                                    onPressed: () => Navigator.pop(dialogContext, true),
                                    child: const Text('确认'),
                                  ),
                                ],
                              );
                            },
                          );

                          if (confirmDelete == true && mounted) {
                            await fileProvider.deleteFile(userId, folderId, fileId);
                            ScaffoldMessenger.of(_pageScaffoldKey.currentContext!).showSnackBar(
                              const SnackBar(content: Text('File deleted successfully')),
                            );
                            Navigator.pop(bottomSheetContext);
                          }
                        },
                      ),
                    ],
                  );
                },
              );
            },
          );
        },
      ),
    );
  }
}

2. 严格检查Widget的mounted状态 #

在执行任何依赖上下文的操作前，务必判断当前Widget是否仍挂载在组件树中——尤其是异步操作完成后，原上下文可能已经随页面销毁而失效：

onLongPress: () async {
  // 长按触发时先检查页面是否存活
  if (!mounted) return;

  await showModalBottomSheet(
    context: context,
    builder: (bottomSheetContext) {
      return Wrap(
        children: [
          ListTile(
            title: const Text('删除文件'),
            onTap: () async {
              final confirmDelete = await showDialog<bool>(
                context: bottomSheetContext,
                builder: (dialogContext) => AlertDialog(/* ...弹窗内容 */),
              );

              // 异步操作完成后再次检查页面状态
              if (confirmDelete == true && mounted) {
                await fileProvider.deleteFile(userId, folderId, fileId);
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('File deleted successfully')),
                );
                Navigator.pop(bottomSheetContext);
              }
            },
          ),
        ],
      );
    },
  );
}

3. 使用全局Navigator上下文 #

如果当前上下文不在Navigator的子树中，可以通过Navigator.of(context, rootNavigator: true)获取全局Navigator的上下文，确保能找到有效的Navigator实例：

// 调用底部弹窗时使用全局Navigator上下文
await showModalBottomSheet(
  context: Navigator.of(context, rootNavigator: true),
  // ...其他参数
);

// 确认对话框同理
final confirmDelete = await showDialog<bool>(
  context: Navigator.of(context, rootNavigator: true),
  builder: (dialogContext) => AlertDialog(/* ...弹窗内容 */),
);

4. 避免缓存上下文变量 #

不要将context变量缓存到异步操作外部，每次需要使用时直接从有效节点获取——比如用GlobalKey的currentContext，或者弹窗内部的dialogContext，避免使用已失效的旧上下文。

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