Android Jetpack Compose中如何在可滚动Column中实现WebView

核心思路是让WebView放弃自身垂直滚动能力，将其高度设置为自适应内容高度，交由父Column的滚动控件统一处理滚动，同时保留WebView的点击、缩放等交互功能。

实现步骤 #

1. 配置可滚动Column
   给外层Column添加verticalScroll修饰符，启用全局垂直滚动：

   Column(
       modifier = Modifier
           .fillMaxSize()
           .verticalScroll(rememberScrollState())
   ) {
       // 顶部Image和WebView容器
   }
   

2. 自适应WebView高度并禁用自身滚动
   通过状态变量保存WebView内容高度，加载完成后动态更新布局高度，同时禁用WebView自身的垂直滚动条：

   var webViewHeight by remember { mutableStateOf(0) }
   
   Box(modifier = Modifier.fillMaxWidth()) {
       AndroidView(
           factory = { context ->
               WebView(context).apply {
                   settings.apply {
                       javaScriptEnabled = true
                       builtInZoomControls = true // 保留缩放控件
                       displayZoomControls = true
                       setSupportZoom(true)
                       isVerticalScrollBarEnabled = false // 禁用自身滚动条
                   }
   
                   webViewClient = object : WebViewClient() {
                       override fun onPageFinished(view: WebView?, url: String?) {
                           super.onPageFinished(view, url)
                           // 计算并更新WebView内容高度（考虑缩放比例）
                           webViewHeight = (contentHeight * scale).toInt()
                       }
                   }
   
                   loadUrl("https://your-target-url.com")
               }
           },
           update = { webView ->
               // 如需动态更新网页内容，可在此处理
           },
           modifier = Modifier.height(webViewHeight.dp)
       )
   }
   

3. 处理动态内容高度更新（可选）
   如果网页包含JS动态加载的内容，可通过WebChromeClient监听页面进度，在内容加载完成后重新计算高度：

   webChromeClient = object : WebChromeClient() {
       override fun onProgressChanged(view: WebView?, newProgress: Int) {
           super.onProgressChanged(view, newProgress)
           if (newProgress == 100) {
               webViewHeight = (view?.contentHeight ?: 0) * (view?.scale ?: 1f).toInt()
           }
       }
   }
   

效果说明 #

• 滚动屏幕时，顶部Image与WebView内容会同步滚动，无滚动冲突
• WebView的链接点击、缩放控件等交互功能完全保留
• 所有滚动逻辑由父Column统一处理，体验一致

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