在 Compose 中的 WebView（伴奏）之上实现 pullRefresh

Question

喂！我一直很难在我的 WebView 上实现 SwipeRefreshLayout。似乎 pullRefresh 只需要一个可滚动的视图就可以运行。

我通过在我的 WebView 上使用来让它工作：

Modifier.verticalScroll(rememberScrollState())

但是，WebView 内容与其父高度不匹配。我什至用过

Modifier.fillMaxHeight()

修复它，但它似乎不起作用。

关于解决方法的任何想法？我刚刚从 XML 过渡到 Compose。

    val webClient = remember {
        object : AccompanistWebViewClient() {
            override fun onPageStarted(
                view: WebView?,
                url: String?,
                favicon: Bitmap?
            ) {
                super.onPageStarted(view, url, favicon)
                // TODO()
            }
        }
    }

    val refreshScope = rememberCoroutineScope()
    var refreshing by remember { mutableStateOf(false) }

    fun refresh() = refreshScope.launch {
        refreshing = true
        delay(1500)
        webViewNavigator.reload()
        refreshing = false
    }

    val state = rememberPullRefreshState(refreshing, ::refresh)

    Box(
        modifier = modifier
            .pullRefresh(state)
            .border(2.dp, Color.Green) // for debugging purposes
    ) {
        WebView(
            state = webViewState,
            navigator = webViewNavigator,
            onCreated = { webView ->
                webView.apply {
                    settings.javaScriptEnabled = true
                }
            },
            client = webClient,
            captureBackPresses = false,
            modifier = Modifier.fillMaxHeight()
                .verticalScroll(rememberScrollState())
        )

        PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
    }

Answer 1

我使用 BoxWithConstraints 修复了它。结果

verticalScroll()

没有为里面的当前内容设置可调整的高度，所以我不得不使用 BoxWithConstraints 将高度设置为固定高度。

    BoxWithConstraints {
        Box(
            modifier = modifier
                .pullRefresh(state)
                .fillMaxSize()
                .border(1.dp, Color.Green) // for debugging purposes
                .verticalScroll(rememberScrollState())
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .height([email protected]) // <- here
            ) {
                WebView(
                    state = webViewState,
                    navigator = webViewNavigator,
                    onCreated = { webView ->
                        webView.apply {
                            settings.javaScriptEnabled = true
                        }
                    },
                    client = webClient,
                    captureBackPresses = false,
                    modifier = Modifier
                        .fillMaxHeight()
                        .border(2.dp, Color.Red) // for debugging purposes
                )
            }

            PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
        }
    }