Flutter webview_flutter在iOS端显示空白问题求助

针对Android端正常显示、iOS端加载HTML字符串或HTTPS链接均空白的问题，可按以下步骤排查解决：

一、修正Info.plist核心配置 #

你之前添加的io.flutter.embedded_views_preview配置类型错误，需将字符串类型改为布尔值，否则iOS无法识别。正确配置如下：

<key>io.flutter.embedded_views_preview</key>
<true/>

至于NSAppTransportSecurity相关配置，因你加载的是本地HTML字符串或HTTPS链接，其实无需额外配置，可暂时移除或保留正确格式：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true/>
</dict>

二、让HTML字符串模拟HTTPS环境加载 #

要让iOS将本地HTML识别为HTTPS来源，只需在loadHtmlString时指定baseUrl为任意有效的HTTPS域名（比如https://localhost）：

String text = "...";
await _controller.loadHtmlString(text, baseUrl: Uri.parse('https://localhost'));

此操作会让WebView将HTML内容置于HTTPS上下文，规避iOS的安全限制。

三、解决WebKit进程权限日志问题 #

控制台输出的RBSServiceErrorDomain和Could not signal service com.apple.WebKit.WebContent日志，是iOS WebContent进程权限缺失导致的，可通过以下方式修复：

• 升级webview_flutter到最新稳定版本，在pubspec.yaml中指定：

  webview_flutter: ^4.4.0 # 替换为当前最新稳定版
  

• 进入iOS目录，删除Pods文件夹和Podfile.lock，执行：

  pod install --repo-update
  

四、排查WebView布局与初始化问题 #

iOS WebView对布局约束要求严格，若没有明确尺寸会直接显示空白，同时需确保控制器未被意外销毁：

1. 添加布局约束：将WebViewWidget包裹在有明确尺寸的父组件中，比如：

   Expanded(
     child: WebViewWidget(controller: _controller),
   )
   

   或指定固定宽高：

   Container(
     width: double.infinity,
     height: double.infinity,
     child: WebViewWidget(controller: _controller),
   )
   

2. 正确初始化控制器：在StatefulWidget的initState中初始化全局控制器，避免重建时丢失状态：

   late final WebViewController _controller;
   
   @override
   void initState() {
     super.initState();
     _controller = WebViewController()
       ..setJavaScriptMode(JavaScriptMode.unrestricted) // 部分网页需开启JS才能显示
       ..loadHtmlString(yourHtmlText, baseUrl: Uri.parse('https://localhost'));
   }
   

五、调试HTTPS链接加载问题 #

若加载https://flutter.dev仍空白，添加导航代理监听加载状态与错误：

_controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(
    NavigationDelegate(
      onPageStarted: (url) => print('开始加载: $url'),
      onPageFinished: (url) => print('加载完成: $url'),
      onWebResourceError: (error) => print('加载错误: ${error.description}'),
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

通过控制台输出的日志，可定位是加载失败、JS错误还是其他问题。

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