Android Compose中ModalBottomSheet内WebView无法滚动问题

核心原因 #

ModalBottomSheet属于嵌套滚动容器，WebView默认未开启嵌套滚动支持，导致滚动事件被BottomSheet拦截无法传递；同时布局约束设置不当，也会限制WebView的滚动空间。

解决方案 #

1. 开启WebView嵌套滚动支持 #

在WebView初始化代码中添加嵌套滚动配置，让其兼容ModalBottomSheet的滚动体系：

AndroidView(
    modifier = Modifier
        .background(color = MaterialTheme.customColorsPalette.colorF6F7FC)
        .fillMaxSize(), // 确保WebView占满可用空间
    factory = {
        WebView(it).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            webViewClient = WebViewClient()

            // 开启嵌套滚动，解决BottomSheet拦截滚动事件的问题
            isNestedScrollingEnabled = true

            // 原有配置保留
            settings.javaScriptEnabled = true
            settings.builtInZoomControls = true
            settings.displayZoomControls = false
            settings.useWideViewPort = true
            settings.loadWithOverviewMode = true
            settings.setSupportZoom(true)
            isVerticalScrollBarEnabled = true
            isHorizontalScrollBarEnabled = true

            loadUrl(url)
        }
    },
    update = {
        it.loadUrl(url)
    }
)

2. 优化ModalBottomSheet布局约束 #

给BottomSheet的内容设置明确高度限制，避免WebView被无限拉伸导致滚动失效：

ModalBottomSheet(
    onDismissRequest = { /* 关闭逻辑 */ },
    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .heightIn(min = 200.dp, max = 600.dp) // 限制BottomSheet内容高度范围
    ) {
        // 放置WebView代码
    }
}

3. 移除冲突的外层滚动容器 #

如果外层Column添加了verticalScroll修饰符，请直接移除——WebView自身具备滚动能力，外层滚动会和WebView的滚动逻辑产生冲突。

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