Compose中基于Accompanist实现WebView下拉刷新的高度适配问题

问题出在你给WebView套了Compose的verticalScroll修饰符——这个修饰符会让WebView的高度自适应内容而非填充父布局，同时还会和WebView自身的原生滚动逻辑冲突。正确的做法是利用WebView原生的滚动监听来配合pullRefresh，而非用Compose的滚动容器。

具体调整步骤：

• 移除WebView的verticalScroll修饰符，让它正常用fillMaxHeight()填充父布局
• 监听WebView的滚动位置，判断是否处于顶部，仅在顶部时允许触发下拉刷新
• 调整rememberPullRefreshState的启用条件，绑定WebView的顶部状态

修改后的完整代码：

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) }
// 保存WebView是否处于顶部的状态
var isWebViewAtTop by remember { mutableStateOf(true) }

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

// 绑定下拉刷新的启用条件：只有WebView在顶部时才允许触发
val state = rememberPullRefreshState(
    refreshing = refreshing,
    onRefresh = ::refresh,
    enabled = isWebViewAtTop
)

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
                // 设置WebView滚动监听，更新顶部状态
                setOnScrollChangeListener { _, _, scrollY, _, _ ->
                    isWebViewAtTop = scrollY == 0
                }
            }
        },
        client = webClient,
        captureBackPresses = false,
        modifier = Modifier.fillMaxHeight() // 移除verticalScroll，正常填充高度
    )

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

原理说明 #

pullRefresh需要感知内部可滚动组件的滚动状态，只有当WebView处于顶部时，下拉动作才会触发刷新。通过监听WebView原生的滚动事件，我们可以准确判断它是否在顶部，既解决了下拉刷新的触发问题，又保留了WebView自身的滚动逻辑和正确的布局高度。

内容的提问来源于stack exchange，提问作者Firate