Flutter WebViewController加载本地HTML文件在iOS模拟器表现异常

问题原因 #

iOS自带的WKWebView对本地文件的访问、跨域请求限制比Android严格很多，你现在的写法刚好踩了iOS端的适配坑：

1. 直接给initialUrl传本地文件路径，iOS端解析经常出问题
2. 没开本地文件跨域访问权限，推文中要加载的推特远程资源被系统默认拦截了
3. 没用iOS适配更好的本地文件加载API

修复方案 #

第一步：换加载方式，开必要权限

别再用initialUrl传本地路径的写法，改用WebViewController的loadFile方法加载，同时开本地文件跨域访问权限：

// 先在当前页面的State类里声明控制器
late WebViewController _webViewController;

@override
void initState() {
  super.initState();
  _webViewController = WebViewController()
    // 开JS权限，和之前的配置一致
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    // 核心配置：开启iOS端本地文件跨域访问权限
    ..setAllowsAccessFromFileURLs(true)
    ..setNavigationDelegate(
      NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('file://')) {
            return NavigationDecision.navigate;
          }
          if (request.isForMainFrame) {
            _launchURL(request.url);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.prevent;
        },
      ),
    )
    // 直接传本地文件的原生路径加载，不用自己转Uri
    ..loadFile(_filename);
}

@override
Widget build(BuildContext context) {
  var child;
  if (_tweetHTML.isNotEmpty) {
    final webView = WebViewWidget(
      controller: _webViewController,
      gestureNavigationEnabled: true,
    );
    child = LimitedBox(
      maxHeight: 500.0,
      child: webView,
    );
  } else {
    child = const Text('Loading...');
  }
  return Container(child: child);
}

第二步：补充info.plist配置（可选）

如果你的HTML里有HTTP协议的资源，需要在info.plist里加HTTP白名单配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

额外校验项

• 确保你的本地HTML文件是存在应用沙箱的Documents、Library或者临时目录里，不要放在没有访问权限的路径
• 如果HTML的文件名或者路径有中文、特殊字符，直接传原生路径给loadFile就行，不用自己编码，避免iOS的Uri解析出问题

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