flutter如何监听窗口关闭事件

在Flutter桌面应用中，如何监听主窗口的关闭事件？我想在用户点击窗口右上角的关闭按钮时，先执行一些清理操作或弹出确认对话框，而不是直接退出应用。请问应该如何实现这个功能？需要针对Windows/macOS/Linux不同平台分别处理吗？

2 回复

在Flutter中监听窗口关闭事件，可使用WidgetsBindingObserver的didPopRoute方法。在dispose中移除监听，initState中添加监听。适用于移动端页面返回，桌面端需用window.onBeforeUnload。

更多关于flutter如何监听窗口关闭事件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，监听窗口关闭事件可以通过以下方法实现，具体取决于你的应用运行平台：

1. 桌面端（Windows/macOS/Linux）

使用 window 类提供的 onBeforeClose 事件（需导入 dart:ui）。

示例代码：

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 监听窗口关闭前事件
  PlatformDispatcher.instance.onBeforeClose += () async {
    // 可在此处执行保存数据或确认关闭的逻辑
    bool shouldClose = await showDialog(
      context: context, // 需要 BuildContext，可在 State 中调用
      builder: (context) => AlertDialog(
        title: Text('确认关闭？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: Text('确认'),
          ),
        ],
      ),
    );
    return shouldClose; // 返回 true 允许关闭，false 阻止
  };

  runApp(MyApp());
}

注意：

  • 需要在 State 中获取 BuildContext 来显示对话框，上述示例需在组件内调整。
  • 返回 Future<bool>，true 允许关闭，false 阻止关闭。

2. Web 端

使用 beforeUnload 事件监听浏览器标签页关闭。

示例代码：

import 'dart:html';

void main() {
  window.addEventListener('beforeunload', (event) {
    // 可提示用户确认离开（浏览器默认提示）
    event.preventDefault();
    event.returnValue = '';
  });
  runApp(MyApp());
}

3. 移动端

通常不需要监听“窗口关闭”，而是使用 WidgetsBindingObserver 监听应用生命周期（如退到后台）。

示例：

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      // 应用进入后台
    }
  }
}

总结

  • 桌面端：用 PlatformDispatcher.instance.onBeforeClose。
  • Web 端：用 window.onBeforeUnload。
  • 根据平台选择对应方法，注意处理异步逻辑和上下文依赖。
回到顶部