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 以拦截后退按钮并通过 viewBinding 访问它在 WebView 内导航，例如具有以下功能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 中，因为每次重组时都会调用更新，而工厂只会调用一次。根据您的实施情况，这可能相关也可能不相关。

Jetpack Compose WebView 处理返回导航并转到上一页

Jetpack Compose WebView Handling Back Navigation And Go To Previous Page

android

android-webview

kotlin

onbackpressed

android-jetpack-compose