Compose HorizontalPager嵌套WebView滚动冲突问题求助

问题核心 #

Jetpack Compose的HorizontalPager默认会优先拦截横向触摸事件，导致WebView内容未滚到边缘时，单指拖拽无法触发WebView内部滚动，只能通过双指操作。而XML的ViewPager依赖原生嵌套滚动的事件分发逻辑，能自动优先处理子View的滚动需求。

解决方案 #

1. 自定义WebView控制事件拦截

实现一个自定义WebView，通过判断自身滚动状态，决定是否请求父布局（HorizontalPager）放弃事件拦截：

class CustomWebView(context: Context, attrs: AttributeSet?) : WebView(context, attrs) {

    override fun onTouchEvent(event: MotionEvent): Boolean {
        // 当WebView还能横向滚动时，请求父布局不要拦截触摸事件
        val canScroll = canScrollHorizontally(-1) || canScrollHorizontally(1)
        requestDisallowInterceptTouchEvent(canScroll)
        return super.onTouchEvent(event)
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        val canScroll = canScrollHorizontally(-1) || canScrollHorizontally(1)
        requestDisallowInterceptTouchEvent(canScroll)
        return super.onInterceptTouchEvent(event)
    }
}

• canScrollHorizontally(-1)：判断WebView内容是否还能向左滚动（未到最左侧）
• canScrollHorizontally(1)：判断WebView内容是否还能向右滚动（未到最右侧）
• requestDisallowInterceptTouchEvent(true)：通知父布局不要拦截当前触摸事件，让WebView处理滚动

2. 在Compose中集成自定义WebView

直接使用AndroidView加载自定义WebView，无需额外嵌套滚动配置：

HorizontalPager(count = 2) { page ->
    AndroidView(
        factory = { context ->
            CustomWebView(context, null).apply {
                settings.apply {
                    javaScriptEnabled = true
                    useWideViewPort = true // 允许WebView加载宽于屏幕的内容
                    loadWithOverviewMode = false // 不强制缩放适配屏幕
                }
                // 加载测试用的宽内容页面
                loadUrl(if (page == 0) "https://example.com/wide-page-1" else "https://example.com/wide-page-2")
            }
        }
    )
}

3. 验证效果

• 当WebView内容未滚动到左右边缘时，单指拖拽会触发WebView内部横向滚动
• 当WebView已滚到最左/最右边缘时，继续拖拽会触发HorizontalPager的页面切换，和XML ViewPager的行为完全一致

额外注意事项 #

• 如果WebView内容是通过JavaScript动态生成的，建议在WebViewClient.onPageFinished回调后再进行滚动状态判断，避免初始状态判断不准确
• 若WebView需要支持缩放，确保settings.setSupportZoom(true)和settings.builtInZoomControls = true配置正确，不影响横向滚动逻辑

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