在 Jetpack Compose 中动态显示 AndroidView

Question

我正在构建一个包含网络视图列表的应用程序，我想根据条件显示一个网络视图。由于 Jetpack Compose 不支持 webview，我使用 AndroidView 来使用原生 WebView。

for (tab in vm.tabs) {
    if (tab.tabId == vm.currentTab.tabId) {
        AndroidView(
            factory = {
                WebView(it).apply {
                    settings.javaScriptEnabled = true
                    webChromeClient = WebChromeClient()
                    webViewClient = WebViewClient()
                    loadUrl(tab.url)
                }
            },
            modifier = Modifier.fillMaxSize()
        )
    }
}

我用谷歌搜索发现 AndroidView 只会初始化一次，并且会在重组时调用更新。我不想更新单个 webview。我只想为每个匹配的条件显示一个全新的 webview。

我怎样才能做到这一点？

Answer 1

您可以使用 Google 的 Accompanist，一个为 Android 的 WebView 提供 Jetpack Compose 包装器的库。

简单示例

for (tab in vm.tabs) {
    if (tab.tabId == vm.currentTab.tabId) {
        val state = rememberWebViewState(tab.url)
        WebView(
            state,
            Modifier,
            onCreated = {
                it.settings.javaScriptEnabled = true
                //...
            }
        )
        if (state.isLoading) {
            CircularProgressIndicator()
        }
    }
}

在 Jetpack Compose 中动态显示 AndroidView

Dynamically show AndroidView in Jetpack Compose

android

android-webview

android-jetpack-compose