Flutter中WebUri无法加载InAppWebView网页问题求助

问题描述 #

使用WebUri初始化链接，通过InAppWebView加载网页时无语法错误，但页面仅显示白/黑屏并附带链接文本，多个页面出现相同问题。

可能原因及解决办法 #

1. 简化URL初始化方式

当前代码通过UriData.fromString转换生成WebUri，易出现不必要的转义问题，建议直接用WebUri.parse初始化：

WebUri webUrl = WebUri.parse('http://live.predictive-lab.com:88/accounts/password/reset/');

2. 配置网络权限与iOS HTTP访问许可

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：目标链接为HTTP协议，iOS默认阻止非HTTPS请求，需在ios/Runner/Info.plist中添加以下配置：

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

3. 添加错误监听与调试日志

给InAppWebView添加错误回调，直接获取加载失败的具体原因：

InAppWebView(
  initialUrlRequest: URLRequest(url: webUrl),
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  onLoadStart: (controller, url) {
    setState(() => isLoading = true);
  },
  onLoadStop: (controller, url) {
    setState(() => isLoading = false);
  },
  // 添加错误监听
  onLoadError: (controller, url, code, message) {
    print('网页加载错误: $message, 错误码: $code');
  },
  // 监听控制台日志
  onConsoleMessage: (controller, consoleMessage) {
    print('Web控制台日志: ${consoleMessage.message}');
  },
)

4. 启用JavaScript与基础配置

部分网页依赖JavaScript渲染，需确保InAppWebView开启JS支持：

InAppWebView(
  initialUrlRequest: URLRequest(url: webUrl),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    // 可选：设置userAgent，避免服务器拦截移动端请求
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
  ),
  // 其他回调...
)

5. 检查布局完整性

确保Stack和Column的children标签闭合，当前提供的代码存在标签遗漏，补充完整后的布局示例：

body: Column(
  children: [
    Expanded(
      child: Stack(
        children: [
          InAppWebView(/* ... */),
          if (isLoading) Center(child: LoadingAnimationWidget.beat(color: purpleColor, size: 50)),
        ],
      ),
    ),
  ],
),

修改后的完整代码示例 #

class _forgotpassState extends State<forgotpass> {
  WebUri webUrl = WebUri.parse('http://live.predictive-lab.com:88/accounts/password/reset/');
  InAppWebViewController? webViewController;
  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: lightPurple,
        leading: Image.asset('assets/pa_logo_sm.png'),
        title: Text('Forgot Password', style: btntxt),
        centerTitle: true,
        actions: [
          TextButton(
            child: Text('LOGIN', style: btntxt),
            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => loginPage())),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: Stack(
              children: [
                InAppWebView(
                  initialUrlRequest: URLRequest(url: webUrl),
                  initialSettings: InAppWebViewSettings(
                    javaScriptEnabled: true,
                  ),
                  onWebViewCreated: (controller) => webViewController = controller,
                  onLoadStart: (controller, url) => setState(() => isLoading = true),
                  onLoadStop: (controller, url) => setState(() => isLoading = false),
                  onLoadError: (controller, url, code, message) => print('加载错误: $message'),
                  onConsoleMessage: (controller, msg) => print('Web日志: ${msg.message}'),
                ),
                if (isLoading)
                  Center(
                    child: LoadingAnimationWidget.beat(color: purpleColor, size: 50),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Syed Mujtaba Ali