暗色模式联动功能区分平台引入

Author: Luozf12345

tdesign-component/example/lib/main.dart

@@ -1,6 +1,3 @@
-// 仅在 Web 平台导入
-import 'dart:html' as html if (dart.library.html) 'dart:html';
-
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -15,6 +12,7 @@ import 'home.dart';
 import 'l10n/app_localizations.dart';
 import 'provider/locale_provider.dart';
 import 'provider/theme_mode_provider.dart';
+import 'util/web_theme_listener.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -89,7 +87,11 @@ class _MyAppState extends State<MyApp> {
           // 在 Web 平台设置 postMessage 监听
           if (PlatformUtil.isWeb) {
             WidgetsBinding.instance.addPostFrameCallback((_) {
-              _setupThemeModeListener(context, themeModeProvider);
+              // 仅在 Web 平台执行
+              if (!kIsWeb) {
+                return;
+              }
+              setupThemeModeListener(themeModeProvider);
             });
           }
 
@@ -140,33 +142,4 @@ class _MyAppState extends State<MyApp> {
       return const {};
     }
   }
-
-  static bool _listenerSetup = false;
-
-  void _setupThemeModeListener(
-      BuildContext context, ThemeModeProvider themeModeProvider) {
-    // 只设置一次监听器
-    if (_listenerSetup) return;
-    _listenerSetup = true;
-
-    // 仅在 Web 平台执行
-    if (!PlatformUtil.isWeb) return;
-
-    // ignore: undefined_prefixed_name, avoid_web_libraries_in_flutter
-    if (kIsWeb) {
-      html.window.onMessage.listen((event) {
-        if (event.data is Map) {
-          final data = event.data as Map;
-          if (data['type'] == 'theme-mode-change') {
-            final themeMode = data['themeMode'] as String?;
-            if (themeMode == 'dark') {
-              themeModeProvider.themeMode = ThemeMode.dark;
-            } else if (themeMode == 'light') {
-              themeModeProvider.themeMode = ThemeMode.light;
-            }
-          }
-        }
-      });
-    }
-  }
 }

tdesign-component/example/lib/util/web_theme_listener.dart

@@ -0,0 +1,6 @@
+// Web 平台主题模式监听器
+// 使用条件导入，避免在非 Web 平台编译时出错
+// 条件导入：Web 平台使用 dart:html，非 Web 平台使用 stub
+export 'web_theme_listener_stub.dart'
+    if (dart.library.html) 'web_theme_listener_web.dart';
+

tdesign-component/example/lib/util/web_theme_listener_stub.dart

@@ -0,0 +1,11 @@
+// 非 Web 平台的 stub 实现
+
+import 'package:flutter/material.dart';
+
+import '../provider/theme_mode_provider.dart';
+
+/// 非 Web 平台的 stub 实现（空操作）
+void setupThemeModeListener(ThemeModeProvider themeModeProvider) {
+  // 非 Web 平台不需要实现，空操作即可
+}
+

tdesign-component/example/lib/util/web_theme_listener_web.dart

@@ -0,0 +1,33 @@
+// Web 平台实现：使用 dart:html 监听 postMessage
+
+import 'dart:html' as html;
+
+import 'package:flutter/material.dart';
+
+import '../provider/theme_mode_provider.dart';
+
+// 静态变量，用于确保只设置一次监听器
+bool _listenerSetup = false;
+
+/// Web 平台的主题模式监听器实现
+void setupThemeModeListener(ThemeModeProvider themeModeProvider) {
+  // 只设置一次监听器
+  if (_listenerSetup) return;
+  _listenerSetup = true;
+
+  // 监听来自父窗口的 postMessage
+  html.window.onMessage.listen((event) {
+    if (event.data is Map) {
+      final data = event.data as Map;
+      if (data['type'] == 'theme-mode-change') {
+        final themeMode = data['themeMode'] as String?;
+        if (themeMode == 'dark') {
+          themeModeProvider.themeMode = ThemeMode.dark;
+        } else if (themeMode == 'light') {
+          themeModeProvider.themeMode = ThemeMode.light;
+        }
+      }
+    }
+  });
+}
+