Jetpack Compose中WebView拉伸、弹窗超出视口问题如何解决

你遇到的两个异常（WebView拉伸、弹窗偏移）都是同一个错误用法导致的，和动态头部组件没有任何关系：

• 错误将Compose的verticalScroll修饰符直接加在了承载WebView的AndroidView外层。WebView本身是自带独立滚动能力、独立视口计算逻辑的原生控件，外层套Compose垂直滚动容器后，Compose会用无界高度测量子元素，直接把WebView的实际高度拉伸到和内部加载网页的总内容高度完全一致，彻底破坏了WebView的视口判断逻辑——WebView会认为自己的可视范围就是整个网页的全高，完全感知不到手机屏幕的实际可视边界，自然会出现内容拉伸、内部弹窗无法在屏幕居中的问题。
• 滚动容器和fillMaxHeight()修饰符存在逻辑冲突：Compose滚动容器内的子元素设置fillMaxHeight()时，测量阶段会给子元素分配不受屏幕高度限制的最大高度，进一步放大了WebView的测量异常，这也是为什么你去掉动态头部单独放WebView问题依然存在的原因。

核心原则是：自带滚动能力的原生控件（WebView、RecyclerView、ScrollView等）用AndroidView承载时，绝对不要在外层套Compose的verticalScroll/horizontalScroll滚动容器，滚动逻辑交给控件自身处理，如果需要和外部的动态头部做滚动联动，直接监听控件自身的滚动偏移即可，不要让Compose接管滚动。

最简修复（无滚动联动需求） #

直接删除外层的verticalScroll修饰符，保留宽高填充逻辑即可：

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun PageBodyWithWebView() {
    val context = LocalContext.current
    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(), 
        factory = {
            WebView(context).apply {
                settings.javaScriptEnabled = true
                isVerticalScrollBarEnabled = true
                loadUrl(pageUrl)
            }
        }
    )
}

适配动态头部联动的修复 #

如果需要实现头部随内容滚动自动缩放的效果，不要把WebView放进Compose滚动体系，直接监听WebView自身的滚动偏移量，把偏移值传给外部头部组件做尺寸计算即可：

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun PageBodyWithWebView(
    onScrollYChanged: (scrollY: Int) -> Unit // 对外暴露滚动偏移，供动态头部做缩放逻辑
) {
    val context = LocalContext.current
    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(), 
        factory = {
            WebView(context).apply {
                settings.javaScriptEnabled = true
                isVerticalScrollBarEnabled = true
                // 直接监听WebView原生的滚动事件
                setOnScrollChangeListener { _, _, scrollY, _, _ ->
                    onScrollYChanged(scrollY)
                }
                loadUrl(pageUrl)
            }
        }
    )
}

调整后WebView会恢复正常的视口计算逻辑，内容拉伸问题会直接消失，内部触发的所有弹窗、选择菜单都会自动在屏幕可视区域内正常居中定位。

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