Compose Multiplatform iOS端WKWebView无法滚动问题求助

各位好！我在做Compose Multiplatform的iOS端开发时，碰到了WKWebView完全无法滚动的问题，按照文档设置了scrollView.scrollEnabled = true和scrollView.bounces = true但完全没效果，折腾了好一阵都没搞定，想请教下有没有大佬能指点下？

我的问题详情：
我在Compose里通过UIKitView封装了WKWebView，用来加载指定URL，但不管网页内容有多长，WebView都没法上下滚动。我已经按照官方提示开启了滚动相关的属性，但就是不生效。

下面是我当前的完整代码：

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.interop.UIKitView
import androidx.compose.ui.viewinterop.UIKitInteropProperties
import androidx.compose.ui.viewinterop.UIKitView
import kotlinx.cinterop.*
import platform.Foundation.NSURL
import platform.WebKit.WKWebView
import platform.WebKit.WKWebViewConfiguration
import platform.CoreGraphics.CGRectMake

@OptIn(ExperimentalForeignApi::class)
@Composable actual fun WebViewContent(url: String) {
    val webViewConfig = remember { WKWebViewConfiguration() }

    UIKitView(
        factory = {
            WKWebView(
                frame = CGRectMake(0.0, 0.0, 0.0, 0.0),
                configuration = webViewConfig
            ).apply {
                // Load the URL
                val nsUrl = NSURL(string = url)
                loadRequest(platform.Foundation.NSURLRequest(uRL = nsUrl))
                
                scrollView.scrollEnabled = true
                scrollView.bounces = true
            }
        },
        modifier = Modifier.fillMaxSize(),
        update = { webView ->
            // Update logic when the URL changes
            val nsUrl = NSURL(string = url)
            (webView as WKWebView).loadRequest(platform.Foundation.NSURLRequest(uRL = nsUrl))
        },
        properties = UIKitInteropProperties(
            isInteractive = true,
            isNativeAccessibilityEnabled = true
        )
    )
}

我尝试过的排查方向 & 可能的解决方案 #

1. 检查WKWebView的Frame与自动布局设置
   我注意到你初始化WKWebView时用了CGRectMake(0.0, 0.0, 0.0, 0.0)的空Frame，iOS的View如果初始Frame是0x0，可能会导致后续布局无法正确传递尺寸给scrollView，进而让scrollView不知道自己有可滚动的区域。

可以给WKWebView加上自动调整尺寸的掩码，让它自动适配父容器的大小：
首先需要导入UIKit的相关类：

import platform.UIKit.UIViewAutoresizing

然后在WKWebView的apply块里添加：

autoresizingMask = UIViewAutoresizing.UIViewAutoresizingFlexibleWidth or UIViewAutoresizing.UIViewAutoresizingFlexibleHeight

同时把初始Frame改成一个非0的临时值（比如100x100），后续会自动调整：

WKWebView(
    frame = CGRectMake(0.0, 0.0, 100.0, 100.0), // 替换原空Frame
    configuration = webViewConfig
)

2. 排查内容尺寸与WebView尺寸是否匹配
   如果网页内容本身的高度比WebView的可视区域还小，那自然不会触发滚动。你可以在update块里打印相关尺寸来验证：

update = { webView ->
    val wkWebView = webView as WKWebView
    println("当前WebView Frame: ${wkWebView.frame}")
    println("ScrollView内容尺寸: ${wkWebView.scrollView.contentSize}")
    
    // 原更新逻辑
    val nsUrl = NSURL(string = url)
    wkWebView.loadRequest(platform.Foundation.NSURLRequest(uRL = nsUrl))
}

如果contentSize的高度小于等于WebView的Frame高度，那就是网页内容不够长；反之则是布局问题。

3. 排查网页本身是否禁止滚动
   有些网页会通过CSS设置body { overflow: hidden; }或者其他方式禁用滚动，这种情况下即使WebView的滚动属性开了也没用。可以先换一个内容较长的公开URL（比如https://developer.apple.com/）测试，排除网页自身的问题。

修改后的完整代码示例 #

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.interop.UIKitView
import androidx.compose.ui.viewinterop.UIKitInteropProperties
import kotlinx.cinterop.*
import platform.Foundation.NSURL
import platform.WebKit.WKWebView
import platform.WebKit.WKWebViewConfiguration
import platform.CoreGraphics.CGRectMake
import platform.UIKit.UIViewAutoresizing

@OptIn(ExperimentalForeignApi::class)
@Composable actual fun WebViewContent(url: String) {
    val webViewConfig = remember { WKWebViewConfiguration() }

    UIKitView(
        factory = {
            WKWebView(
                frame = CGRectMake(0.0, 0.0, 100.0, 100.0),
                configuration = webViewConfig
            ).apply {
                autoresizingMask = UIViewAutoresizing.UIViewAutoresizingFlexibleWidth or UIViewAutoresizing.UIViewAutoresizingFlexibleHeight
                
                // 加载URL
                val nsUrl = NSURL(string = url)
                loadRequest(platform.Foundation.NSURLRequest(uRL = nsUrl))
                
                scrollView.scrollEnabled = true
                scrollView.bounces = true
            }
        },
        modifier = Modifier.fillMaxSize(),
        update = { webView ->
            val wkWebView = webView as WKWebView
            // 打印尺寸排查
            println("当前WebView Frame: ${wkWebView.frame}")
            println("ScrollView内容尺寸: ${wkWebView.scrollView.contentSize}")
            
            // URL更新逻辑
            val nsUrl = NSURL(string = url)
            wkWebView.loadRequest(platform.Foundation.NSURLRequest(uRL = nsUrl))
        },
        properties = UIKitInteropProperties(
            isInteractive = true,
            isNativeAccessibilityEnabled = true
        )
    )
}

可以先试试上面的修改，看看滚动能不能正常工作，如果还有问题可以把打印的尺寸信息贴出来，方便进一步排查~

内容来源于stack exchange