在 Jetpack Compose 中動態顯示 AndroidView

Question

我正在構建一個包含 Web 視圖列表的應用程序，我想根據條件顯示 webview。 由於 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()
        }
    }
}