Flutter InAppWebView iOS主线程调用警告致崩溃问题求解

问题描述 #

使用InAppWebView组件开发Flutter应用时，通过Xcode运行出现安全警告：

This method should not be called on the main thread as it may lead to UI unresponsiveness.

该警告会引发应用冻结甚至崩溃，原组件代码及使用方式如下：

原WebView组件代码 #

class WebViewWidget extends StatelessWidget {
  WebViewWidget({
  }) : super(key: Key(url));

  late final InAppWebViewController inAppWebViewController;
  final InAppWebViewGroupOptions webViewOptions = InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true,
    ),
    crossPlatform: InAppWebViewOptions(
      transparentBackground: true,
      verticalScrollBarEnabled: false,
      horizontalScrollBarEnabled: false,
      cacheEnabled: true,
      clearCache: false,
      supportZoom: false,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      key: Key(url),
      initialUrlRequest: URLRequest(
        url: Uri.tryParse("https://flutter.dev/"),
      ),
      initialOptions: webViewOptions,
      onWebViewCreated: (InAppWebViewController controller) async {
        inAppWebViewController = controller;
      },
      onConsoleMessage: (controller, consoleMessage) {
        debugPrint("$consoleMessage");
      },
    );
  }
}

原组件使用代码 #

class GetApp extends StatelessWidget {
  final RemoteMessage? message;
  const GetApp({super.key, this.message});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WebViewWidget(),
    );
  }
}

解决方案 #

1. 改用StatefulWidget管理控制器 #

StatelessWidget的不可变性易引发控制器管理逻辑的主线程阻塞风险，改为StatefulWidget可更安全地维护WebViewController的生命周期。

2. 后台线程执行耗时操作 #

将WebView初始化后的耗时逻辑（如缓存配置、JS交互等）通过compute函数移至后台线程，避免阻塞主线程。

3. 优化回调操作 #

将控制台输出等非紧急操作通过Future.microtask延迟执行，降低主线程负载。

修改后的代码 #

WebView组件代码 #

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

  @override
  State<WebViewWidget> createState() => _WebViewWidgetState();
}

class _WebViewWidgetState extends State<WebViewWidget> {
  late final InAppWebViewController inAppWebViewController;
  final InAppWebViewGroupOptions webViewOptions = InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
    ios: IOSInAppWebViewControllerOptions(
      allowsInlineMediaPlayback: true,
    ),
    crossPlatform: InAppWebViewOptions(
      transparentBackground: true,
      verticalScrollBarEnabled: false,
      horizontalScrollBarEnabled: false,
      cacheEnabled: true,
      clearCache: false,
      supportZoom: false,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      key: const Key("flutter_dev_webview"),
      initialUrlRequest: URLRequest(
        url: Uri.tryParse("https://flutter.dev/"),
      ),
      initialOptions: webViewOptions,
      onWebViewCreated: (InAppWebViewController controller) async {
        inAppWebViewController = controller;
        // 耗时操作移至后台线程
        await compute(_handleWebViewSetup, controller);
      },
      onConsoleMessage: (controller, consoleMessage) {
        // 延迟输出，避免阻塞主线程
        Future.microtask(() => debugPrint("$consoleMessage"));
      },
    );
  }

  // 后台线程执行的初始化逻辑
  static Future<void> _handleWebViewSetup(InAppWebViewController controller) async {
    // 可添加缓存清理、JS注入等耗时操作
    // 示例：await controller.clearCache();
  }
}

组件使用代码（无需修改） #

class GetApp extends StatelessWidget {
  final RemoteMessage? message;
  const GetApp({super.key, this.message});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const WebViewWidget(),
    );
  }
}

额外优化建议 #

若警告仍存在，检查是否有其他代码直接在主线程调用WebViewController方法，可将此类操作包裹在Future.delayed(Duration.zero, () { ... })中，将任务放到主线程事件队列末尾，避免同步阻塞。

内容的提问来源于stack exchange，提问作者Otabek Ochilov