Jetpack Compose中mutableIntState变更后WebView不重组问题求助

问题根源 #

你实现的MyCustomWebView里，AndroidView仅通过factory创建一次WebView实例，后续fontSize参数变化时，没有触发任何WebView的更新逻辑——factory只会在Composable首次初始化时执行，所以WebView不会重新加载带新字体样式的内容，也不会调整自身设置。

另外注意你MyScreen里的笔误：传递给MyCustomWebView的fontSize应该是myViewModel.fontSize，而非直接写fontSize。

可行解决方案 #

方案1：利用AndroidView的update回调 #

给AndroidView添加update参数，当fontSize或html变化时，重新加载带新样式的HTML内容：

@Composable
fun MyCustomWebView(html: String, fontSize: Int) {
    val context = LocalContext.current
    // 用remember缓存拼接后的HTML，避免重复计算
    val htmlStyled = remember(html, fontSize) {
        "<html><head><style>body,p,h1,h2,h3,span,a{font-size: ${fontSize}px!important;}</style></head><body>${html}</body></html>"
    }

    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = {
            WebView(context).apply {
                webViewClient = WebViewClient()
                settings.cacheMode = WebSettings.LOAD_NO_CACHE
                settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
                settings.javaScriptEnabled = true
                settings.domStorageEnabled = true
                settings.allowFileAccess = true
            }
        },
        // 参数变化时执行更新逻辑
        update = { webView ->
            webView.loadDataWithBaseURL("", htmlStyled, "text/html", "UTF-8", "")
            
            // 如果想用废弃的textSize属性，也在这里更新
            /*webView.settings.textSize = when (fontSize) {
                16 -> WebSettings.TextSize.SMALLEST
                18 -> WebSettings.TextSize.SMALLER
                21 -> WebSettings.TextSize.NORMAL
                23 -> WebSettings.TextSize.LARGER
                else -> WebSettings.TextSize.LARGEST
            }*/
        }
    )
}

方案2：用remember保存WebView实例，手动触发更新 #

通过remember持久化WebView实例，借助LaunchedEffect监听参数变化并更新：

@Composable
fun MyCustomWebView(html: String, fontSize: Int) {
    val context = LocalContext.current
    // 持久化WebView实例
    val webView = remember {
        WebView(context).apply {
            webViewClient = WebViewClient()
            settings.cacheMode = WebSettings.LOAD_NO_CACHE
            settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            settings.allowFileAccess = true
        }
    }

    // 监听html或fontSize变化，重新加载内容
    LaunchedEffect(html, fontSize) {
        val htmlStyled = "<html><head><style>body,p,h1,h2,h3,span,a{font-size: ${fontSize}px!important;}</style></head><body>${html}</body></html>"
        webView.loadDataWithBaseURL("", htmlStyled, "text/html", "UTF-8", "")
    }

    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { webView }
    )
}

内容的提问来源于stack exchange，提问作者Mohammad Ali Fouani