Jetpack Compose WebView 处理后退导航并转到上一页

Question

我正在使用 Jetpack Compose，并将其WebView封装在一个AndroidView可组合项中，如下所示：

AndroidView(modifier = modifier, factory = { context ->
        WebView(context).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            webViewClient = WebViewClient()
            settings.javaScriptEnabled = true
        }
    }, update = { webView -> webView.loadUrl(url) })

在传统方式中，我们可以向 中添加OnBackPressedDispatcher来Activity拦截后按，并WebView通过 viewBinding 访问它来在 中导航，例如使用类似的函数WebView来goBack()检查是否可以返回canGoBack()。

但是我们如何使用 Jetpack Compose 方法实现相同的目标呢？

Answer 1

将 WebView 分配给外部变量似乎没有任何问题，所以这就是我在这里所做的。

var backEnabled by remember { mutableStateOf(false) }
var webView: WebView? = null
AndroidView(
    modifier = modifier,
    factory = { context ->
        WebView(context).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            webViewClient = object : WebViewClient() {
                override fun onPageStarted(view: WebView, url: String?, favicon: Bitmap?) {
                    backEnabled = view.canGoBack()
                }
            }
            settings.javaScriptEnabled = true

            loadUrl(url)
            webView = this
        }
    }, update = {
        webView = it
    })

BackHandler(enabled = backEnabled) {
    webView?.goBack()
}

监听WebViewClient它onPageStarted检查 WebView 是否可以向后导航然后更新backEnabled。这会导致重新组合，从而打开和关闭BackHandler。

我也已经loadUrl从update函数中移出factory，因为每次重组时都会调用更新，而工厂只被调用一次。根据您的实施情况，这可能相关也可能不相关。