2023-11-10-Jetpack-Compose中加载WebView

问题

最近在Compose里面使用WebView加载页面的时候发现页面元素加载不全

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebViewScreen(url: String) {
    val context = LocalContext.current
    val webView = WebView(context)
    
    webView.webViewClient = WebViewClient()
    webView.webChromeClient = WebChromeClient()

    webView.loadUrl(url)

    // Create an AndroidView that wraps the WebView
    AndroidView(
        factory = { webView },
        modifier = Modifier
            .fillMaxSize()
            .background(color = MaterialTheme.colorScheme.primary),
    )
}

加载后效果

这个是在浏览器正常的效果

对比之下，有很多元素没有加载出来。

解决办法

在webview初始化的时候，设置它的layoutParams

val webView = WebView(context).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }

完整代码

同时把loadurl方法移动到AndroidView方法里面

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebViewScreen(url: String) {
    val context = LocalContext.current
    val webView = WebView(context).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)
    webView.settings.run {
        javaScriptEnabled = true
        loadsImagesAutomatically = true
        mediaPlaybackRequiresUserGesture = false
        domStorageEnabled = true
    }
    webView.webViewClient = WebViewClient()
    webView.webChromeClient = WebChromeClient()

    // Create an AndroidView that wraps the WebView
    AndroidView(
        factory = { webView },
        modifier = Modifier
            .fillMaxSize()
            .background(color = MaterialTheme.colorScheme.primary),
        update = {
            it.loadUrl(url)
        }
    )
}