ModalBottomSheetLayout中WebView内容无法滚动的解决方法咨询

这个问题本质是ModalBottomSheetLayout的触摸事件拦截逻辑和WebView的滚动事件冲突，BottomSheet默认会拦截触摸事件用于自身的拖拽操作，导致WebView拿不到滚动事件。下面是几个可行的解决办法：

方案1：启用WebView的嵌套滚动 #

这是最直接的解决方式，给WebView开启嵌套滚动支持，让触摸事件能正确传递给WebView：

ModalBottomSheetLayout(
    sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Expanded),
    sheetContent = {
        AndroidView(factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                // 关键：启用嵌套滚动，让WebView能接收滚动事件
                isNestedScrollingEnabled = true
                loadUrl("https://example.com")
            }
        }, modifier = Modifier.fillMaxHeight()) // 确保WebView高度足够容纳超出内容
    }
) {
    Button(onClick = { /* 触发打开BottomSheet */ }) {
        Text("打开底部弹窗")
    }
}

方案2：控制BottomSheet的触摸事件拦截 #

如果方案1无效，可以手动控制BottomSheet是否拦截触摸事件，让滚动事件优先交给WebView处理：

val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Expanded)

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        Box(
            modifier = Modifier
                .pointerInput(Unit) {
                    awaitPointerEventScope {
                        while (true) {
                            val event = awaitPointerEvent()
                            // 当检测到滚动事件时，禁止BottomSheet拦截，让WebView处理
                            sheetState.interceptTouchEvent = event.type != PointerEventType.Scroll
                        }
                    }
                }
                .fillMaxHeight()
        ) {
            AndroidView(factory = { context ->
                WebView(context).apply {
                    settings.javaScriptEnabled = true
                    loadUrl("https://example.com")
                }
            })
        }
    }
) {
    Button(onClick = { /* 触发打开BottomSheet */ }) {
        Text("打开底部弹窗")
    }
}

额外检查点 #

• 确认WebView的高度设置正确：必须让内容高度超出WebView的显示区域才会触发滚动，所以给AndroidView添加Modifier.fillMaxHeight()或者合适的固定高度很重要。
• 避免BottomSheet处于部分展开状态：如果开启了skipPartiallyExpanded = false，部分展开状态下的触摸拦截逻辑可能更严格，可以尝试设置skipPartiallyExpanded = true来简化事件处理。

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