WebView 嵌套滚动在 Android Jetpack Compose 中不起作用答案

【问题标题】：WebView nested scroll doesn't work in Android Jetpack ComposeWebView 嵌套滚动在 Android Jetpack Compose 中不起作用
【发布时间】：2022-10-26 00:06:57
【问题描述】：

WebView 不在 Compose 内滚动。我需要使用 Compose 将 WebView 放入 BottomSheet。即使我们使用例如 WebView 不滚动的问题NestedWebView，或NestedScrollWebView。如果我将 WebView 放在 NestedScrollView 中，它仍然不会对滚动做出反应。

BottomSheetScaffold(
        sheetContent = {
            AndroidView(factory = {
                NestedWebView(it).apply {
                        layoutParams = ViewGroup.LayoutParams(
                            ViewGroup.LayoutParams.MATCH_PARENT,
                            ViewGroup.LayoutParams.MATCH_PARENT
                        )
                        settings.domStorageEnabled = true
                        settings.javaScriptEnabled = true
                        settings.useWideViewPort = true
                        webViewClient = WebViewClient()
                        //loadUrl("https://contest.rippl.club/")
                        loadUrl("https://codeflarelimited.com")
                    }
                })

        }) {
    }

一种解决方法是使用verticalScroll并将webview高度设置为WRAP_CONTENT：

 val scrollState = rememberScrollState()
 AndroidView(modifier = Modifier.verticalScroll(scrollState), factory = {
            WebView(it).apply {
                     layoutParams = ViewGroup.LayoutParams(
                          ViewGroup.LayoutParams.MATCH_PARENT,
                          ViewGroup.LayoutParams.WRAP_CONTENT
                          ---//---

但是有很多网站不能与 wrap_content 一起使用，例如因为像这个网站https://contest.rippl.club/这样的内部滚动。该站点不适用于该解决方法。如果我们将 webview 高度设置为屏幕高度，它仍然不起作用，因为verticalScroll 是作为 ScrollView 工作的，所以它只会滚动到这个高度。

我也检查了这个文档https://developer.android.com/jetpack/compose/gestures#parent-compose-child-view，但对于 webview 案例没有任何作用。

【问题讨论】：

你找到解决方案了吗？它对我不起作用，这是我正在尝试的基本语法。 LazyColumn { items(size) { AndroidView { Webview { // 可滚动内容 } } } } 这里的 web 视图不滚动。如果我将它从惰性列中取出并只渲染一个，我可以滚动 Web 视图的内容。我想这也是你的问题。

标签： android webview android-jetpack-compose bottom-sheet

【解决方案1】：

您需要使用 NestedScrollConnection 对象，并将其传递给外部视图上的 nestedSCroll 修饰符。 Here's 一个基本的例子

【讨论】：

不工作。这基本上是主要问题。 NestedScroll 不兼容，因此不适用于 WebView。从您提到的示例中，如果您放置 WebView 而不是 LazyColumn，则此示例将不起作用。当您滚动 Webview 时，compose nestedScroll 不会做出反应。 NestedWebView 也是如此。
它肯定可以工作——您能否发布对您不起作用的实际代码（使用 NestedScrollConnection）？
您可以查看您提到的代码作为示例，只需使用 webview 而不是 LazyColumn。基本上，nestedScroll 已经在 BottomSheet 中使用并在那里正确实现。当您尝试滚动 webview 时它没有反应的问题。这实际上是撰写问题，我希望他们能尽快解决这个问题，但现在我希望有一些可行的解决方法。

【解决方案2】：

有一种简单的方法可以解决这个问题。我有和你完全一样的情况。您需要做的就是以某种方式实现pointerInput：

AndroidView(
        modifier = Modifier
            .fillMaxHeight(0.9f)
            .pointerInput(Unit) {
                detectVerticalDragGestures { _, dragAmount ->
                    val initialDrag = currentVerticalDrag.value + dragAmount
                    val calculatedDrag = when {
                        initialDrag > 0 -> {
                            0
                        }
                        abs(initialDrag) > measuredHeight.value -> {
                            measuredHeight.value
                        }
                        else -> {
                            initialDrag.roundToInt()
                        }
                    }
                    currentVerticalDrag.value = calculatedDrag
                }
            },
        factory = {
            WebView(it).apply {
                settings.javaScriptEnabled = true
                addJavascriptInterface(jsInterface, "HTMLOUT")
                webViewClient = FaqWebViewClient(
                    onPageLoadingStart = {
                        isPageLoading.value = true
                    },
                    onPageLoadComplete = {
                        isPageLoading.value = false
                    }
                )
                loadUrl(url)
            }
        }, update = { webView ->
            webView.scrollTo(0, abs(currentVerticalDrag.value))
        }
    )

【讨论】：