如何编写仅适配Flutter Web的浏览器标签页切换监听代码

要让这段Web专属代码不影响移动端构建，核心是利用Flutter的平台条件编译机制，让dart:js相关代码仅在Web环境下被编译和执行，移动端会自动忽略。

方案1：直接在代码中添加条件编译 #

这种方式适合逻辑简单的场景，无需拆分文件：

// 条件导入：Web端导入dart:js，移动端导入空文件
import 'dart:js' as js if (dart.library.io) 'empty_file.dart';
import 'package:flutter/foundation.dart';

void setupTabVisibilityListener() {
  // 仅Web平台执行监听逻辑
  if (kIsWeb) {
    js.context.callMethod('addEventListener', [
      'visibilitychange',
      (event) {
        // 简化document.hidden的获取方式，避免使用eval
        final isVisible = !js.context['document']['hidden'];
        handleTabChange(isVisible);
      }
    ]);
  }
}

// 统一处理函数：Web端实现逻辑，移动端留空
void handleTabChange(bool isVisible) {
  if (kIsWeb) {
    // 这里写Web端标签页切换后的业务逻辑
    print(isVisible ? '标签页已激活' : '标签页已隐藏');
  }
}

注意：需要在项目中创建一个empty_file.dart空文件，用于移动端导入时避免编译错误。

方案2：拆分文件+条件导入（推荐） #

这种方式代码结构更清晰，便于维护：

1. 创建三个文件：
   • tab_visibility_web.dart（Web端实现）
   • tab_visibility_mobile.dart（移动端空实现）
   • tab_visibility.dart（统一导出入口）

tab_visibility.dart #

// 条件导出：Web端导出Web实现，移动端导出空实现
export 'tab_visibility_mobile.dart' if (dart.library.js) 'tab_visibility_web.dart';

tab_visibility_web.dart #

import 'dart:js' as js;

void setupTabVisibilityListener() {
  js.context.callMethod('addEventListener', [
    'visibilitychange',
    (event) {
      final isVisible = !js.context['document']['hidden'];
      handleTabChange(isVisible);
    }
  ]);
}

void handleTabChange(bool isVisible) {
  // Web端专属业务逻辑
  print(isVisible ? '标签页处于前台' : '标签页切换到后台');
}

tab_visibility_mobile.dart #

void setupTabVisibilityListener() {
  // 移动端无需处理，留空
}

void handleTabChange(bool isVisible) {
  // 移动端无需处理，留空
}

3. 在项目中调用：

import 'tab_visibility.dart';

// 初始化监听
setupTabVisibilityListener();

关键说明 #

• 两种方案都能确保移动端编译时完全不接触dart:js相关代码，避免构建报错。
• 方案2的代码分离方式更适合复杂逻辑，便于后续扩展和维护。
• 替换掉了原代码中的eval调用，直接通过js.context['document']['hidden']获取状态，更安全高效。

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