如何在Jetpack Compose中集成功能完善的WebView？求可靠替代方案

1. 基于AndroidX自行封装WebView（最可控） #

如果需要完全掌控用户交互逻辑，直接用Compose的AndroidView包裹原生WebView是最优解——能直接复用原生WebView的所有API，自定义导航拦截、表单处理、错误回调等所有细节，完全不受第三方库限制。

示例代码：

@Composable
fun CustomControlledWebView(
    targetUrl: String,
    onPageStart: (String) -> Unit = {},
    onPageFinish: (String) -> Unit = {},
    onLoadError: (WebResourceRequest, WebResourceError) -> Unit = { _, _ -> },
    interceptUrl: (WebResourceRequest) -> Boolean = { false }
) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.apply {
                    javaScriptEnabled = true
                    domStorageEnabled = true
                    builtInZoomControls = true
                }
                webViewClient = object : WebViewClient() {
                    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                        url?.let(onPageStart)
                    }

                    override fun onPageFinished(view: WebView?, url: String?) {
                        url?.let(onPageFinish)
                    }

                    override fun onReceivedError(
                        view: WebView?,
                        request: WebResourceRequest?,
                        error: WebResourceError?
                    ) {
                        if (request != null && error != null) {
                            onLoadError(request, error)
                        }
                    }

                    override fun shouldOverrideUrlLoading(
                        view: WebView?,
                        request: WebResourceRequest?
                    ): Boolean {
                        return request?.let(interceptUrl) ?: super.shouldOverrideUrlLoading(view, request)
                    }
                }
                webChromeClient = object : WebChromeClient() {
                    // 可扩展处理弹窗、进度条、JS对话框等
                }
            }
        },
        update = { webView ->
            if (webView.url != targetUrl) {
                webView.loadUrl(targetUrl)
            }
        }
    )
}

你可以基于这个基础封装，进一步扩展表单拦截、JS与Kotlin交互、自定义错误页面等功能。

2. 使用维护活跃的第三方Compose WebView库 #

如果不想从零封装，以下两个库目前维护状态良好，能覆盖大部分交互控制需求：

• io.github.joelkanyi:compose-webview-multiplatform：支持Android/iOS多平台，提供Compose风格的API，包含导航拦截、错误回调、JS交互等核心功能，更新频率稳定。
  示例代码：

  @Composable
  fun MultiplatformWebViewDemo(url: String) {
      WebView(
          url = url,
          onPageStarted = { /* 页面开始加载回调 */ },
          onPageFinished = { /* 页面加载完成回调 */ },
          onError = { error -> /* 加载错误处理 */ },
          onNavigationRequest = { request ->
              // 返回true拦截导航，false允许跳转
              false
          }
      )
  }
  

• dev.chrisbanes.accompanist:accompanist-webview：虽然标记为deprecated，但核心逻辑已迁移到AndroidX官方支持，目前仍有社区维护，API设计贴合Compose习惯，适合快速集成基础WebView功能。

3. 扩展功能示例：拦截表单提交 #

如果需要监听用户表单提交行为，可以通过注入JS代码实现：

// 在WebView初始化时注入监听脚本
webView.evaluateJavascript(
    """
    document.addEventListener('submit', function(e) {
        window.androidBridge.onFormSubmitted(e.target.action);
    });
    """.trimIndent(),
    null
)

// 定义JS交互接口
class WebBridge(private val onFormSubmit: (String) -> Unit) {
    @JavascriptInterface
    fun onFormSubmitted(actionUrl: String) {
        onFormSubmit(actionUrl)
    }
}

// 绑定到WebView
webView.addJavascriptInterface(WebBridge { actionUrl ->
    // 自定义表单提交逻辑，比如校验、跳转原生页面等
}, "androidBridge")

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