如何在Flutter Web中检测Chrome标签页的切换状态

你可以直接利用浏览器原生的visibilitychange API来实现，Flutter Web允许通过dart:html库访问浏览器DOM相关能力，具体步骤如下：

• 首先导入dart:html库：

  import 'dart:html' as html;
  

• 在StatefulWidget的生命周期中监听事件并处理状态变化：

  class TabVisibilityDetector extends StatefulWidget {
    const TabVisibilityDetector({super.key});
  
    @override
    State<TabVisibilityDetector> createState() => _TabVisibilityDetectorState();
  }
  
  class _TabVisibilityDetectorState extends State<TabVisibilityDetector> {
    @override
    void initState() {
      super.initState();
      // 注册visibilitychange事件监听器
      html.document.addEventListener('visibilitychange', _handleTabVisibilityChange);
    }
  
    @override
    void dispose() {
      // 移除监听器，避免内存泄漏
      html.document.removeEventListener('visibilitychange', _handleTabVisibilityChange);
      super.dispose();
    }
  
    void _handleTabVisibilityChange(html.Event event) {
      if (html.document.hidden) {
        // 标签页被切换到后台（不可见）
        print('Chrome标签页已切换到后台');
        // 这里可以添加你的业务逻辑，比如暂停播放、停止网络请求等
      } else {
        // 标签页被切换回前台（可见）
        print('Chrome标签页已切换到前台');
        // 恢复业务逻辑，比如继续播放、重新加载数据等
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return const Scaffold(
        body: Center(
          child: Text('观察标签页切换状态'),
        ),
      );
    }
  }
  

关键说明 #

• html.document.hidden是浏览器标准属性，Chrome完全支持：当标签页处于后台或被最小化时，该值为true；标签页处于前台可见状态时为false。
• visibilitychange事件会在标签页可见性发生变化时触发，这是浏览器原生事件，无需依赖额外第三方包。

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