Compose中用AndroidView集成WebView遇空白屏及Accompanist相关疑问

1. 是否可以给Accompanist-WebView添加JS接口？ #

可以。Accompanist-WebView是对原生Android WebView的Compose封装，你可以通过组件提供的onCreated回调获取原生WebView实例，直接调用addJavascriptInterface方法添加JS接口。示例代码如下：

@Composable
fun AccompanistWebViewWithJSInterface() {
    val webViewState = rememberWebViewState(url = URLS.SUPPORT_SHORTCUT_PAGE)
    WebView(
        state = webViewState,
        onCreated = { webView ->
            webView.settings.javaScriptEnabled = true
            webView.addJavascriptInterface(MyJavaScriptInterface(webView.context, webView), "AndroidFunction")
        },
        client = rememberWebViewClientCompat(
            onReceivedHttpError = { _, _, _ ->
                // 处理HTTP错误逻辑
            },
            onReceivedError = { _, _, _ ->
                // 处理加载错误逻辑
            }
        )
    )
}

2. 用AndroidView集成WebView时为何出现短暂空白屏？ #

出现短暂空白的核心原因及优化方向如下：

• WebView初始化与页面加载耗时：原生WebView初始化、JS环境准备、网络请求加载页面都需要时间，这段时间内WebView未渲染内容，Compose会显示空白。
  • 优化：可提前在ViewModel中预创建WebView实例，或在WebView加载完成前显示加载占位（如CircularProgressIndicator）。
• 重复加载页面：你的代码中factory和update回调都调用了loadUrl，导致页面重复加载，延长空白等待时间。
  • 优化：仅在factory中调用一次loadUrl，update回调仅处理URL变更等必要场景的加载。
• 布局参数设置：使用WRAP_CONTENT作为WebView高度，可能导致加载前WebView高度为0，视觉上呈现空白。
  • 优化：改为MATCH_PARENT或设置固定高度，确保WebView加载时占据应有空间。
• Compose重组时机延迟：当screenVM.showWebview.value变为true时才开始创建WebView，从创建到渲染完成存在时间差。
  • 优化：可提前预加载不可见的WebView实例，或在状态变更前完成初始化准备。

优化后的示例代码（解决重复加载和占位问题）：

@SuppressLint("SetJavaScriptEnabled")
@Composable
private fun Webview(screenVM: MainScreenVM = hiltViewModel()) {
    if (screenVM.showWebview.value) {
        val isPageLoaded = remember { mutableStateOf(false) }
        
        // 加载中显示占位
        if (!isPageLoaded.value) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator()
            }
        }
        
        AndroidView(factory = { context ->
            WebView(context).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
                webViewClient = object : WebViewClientCompat() {
                    override fun onReceivedHttpError(
                        view: WebView,
                        request: WebResourceRequest,
                        errorResponse: WebResourceResponse
                    ) {
                        super.onReceivedHttpError(view, request, errorResponse)
                        screenVM.showWebview.value = false
                    }
                    override fun onReceivedError(
                        view: WebView,
                        request: WebResourceRequest,
                        error: WebResourceErrorCompat
                    ) {
                        super.onReceivedError(view, request, error)
                        screenVM.showWebview.value = false
                    }

                    override fun onPageFinished(view: WebView?, url: String?) {
                        super.onPageFinished(view, url)
                        isPageLoaded.value = true
                    }
                }
                settings.javaScriptEnabled = true
                settings.allowContentAccess = true
                settings.allowFileAccess = true
                addJavascriptInterface(MyJavaScriptInterface(context, this), "AndroidFunction")
                loadUrl(URLS.SUPPORT_SHORTCUT_PAGE)
            }
        }, update = { webView ->
            // 仅在URL不一致时重新加载
            if (webView.url != URLS.SUPPORT_SHORTCUT_PAGE) {
                webView.loadUrl(URLS.SUPPORT_SHORTCUT_PAGE)
            }
        })
    }
}

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