KMP Compose iOS端如何捕获可垂直滚动Column的完整长截图（含非可视区域）

嘿，这个问题我刚好踩过坑！你现在的截图代码只能抓屏幕上看得见的部分，要搞定滚动Column的完整长图，得从Compose共享层和iOS原生绘图两方面配合来弄，我给你一步步说清楚：

第一步：在共享代码层拿到完整内容的真实尺寸 #

首先得知道你的滚动Column到底有多长多宽，不能用屏幕的可视尺寸凑数。你可以在滚动Column外面套个Box，用onGloballyPositioned modifier来捕获整个内容的真实布局大小：

// commonMain 共享代码
var fullContentWidth by remember { mutableStateOf(0f) }
var fullContentHeight by remember { mutableStateOf(0f) }

Box(
    modifier = Modifier
        .fillMaxWidth()
        .onGloballyPositioned { coordinates ->
            // 记录整个滚动内容的真实宽高
            fullContentWidth = coordinates.size.width.toFloat()
            fullContentHeight = coordinates.size.height.toFloat()
        }
) {
    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
    ) {
        // 这里放你所有的滚动内容
    }
}

注意这个Box不要加固定高度，让它自动撑开包裹整个Column的完整内容，这样才能拿到准确的尺寸。

第二步：改造iOS端的ScreenshotService，支持指定尺寸绘制 #

原来的代码是用屏幕可视区域的bounds来绘图，现在我们要改成用共享层传过来的完整内容尺寸，创建对应大小的绘图上下文，把整个View层级都画进去。改造后的代码是这样的：

// iosMain 代码
import platform.UIKit.*
import platform.Foundation.*
import platform.CoreGraphics.*
import kotlinx.cinterop.*

@OptIn(ExperimentalForeignApi::class)
actual class ScreenshotService {
    // 新增参数接收完整内容的宽高
    actual fun captureFullScrollableScreenshot(fullWidth: Float, fullHeight: Float): String? {
        val scenes = UIApplication.sharedApplication.connectedScenes
        (scenes as NSSet).allObjects
            .mapNotNull { it as? UIWindowScene }
            .forEach { scene ->
                val window = scene.windows.firstOrNull() as? UIWindow ?: return@forEach
                val rootView = window.rootViewController?.view ?: return@forEach
                
                // 创建对应完整内容尺寸的高清绘图上下文
                val fullSize = CGSizeMake(fullWidth, fullHeight)
                UIGraphicsBeginImageContextWithOptions(fullSize, false, UIScreen.mainScreen.scale)
                
                // 定义完整内容的绘制区域
                val fullBounds = CGRectMake(0.0, 0.0, fullWidth, fullHeight)
                // 把目标View的整个层级绘制到这个大尺寸的上下文中
                val success = rootView.drawViewHierarchyInRect(fullBounds, true)
                
                val image = UIGraphicsGetImageFromCurrentImageContext()
                UIGraphicsEndImageContext()

                if (success && image != null) {
                    val data = UIImagePNGRepresentation(image) ?: return@forEach
                    return data.base64EncodedStringWithOptions(0uL)
                }
            }
        return null
    }
}

这里用UIGraphicsBeginImageContextWithOptions而不是原来的UIGraphicsBeginImageContext，是为了保证截图的清晰度和屏幕分辨率匹配，不会模糊。

第三步：在共享层触发截图时传入完整尺寸 #

当你要触发截图（比如用户点了个按钮），就把之前记录的完整宽高传给iOS端的截图方法就行：

// commonMain 中的截图按钮逻辑
Button(onClick = {
    val fullScreenshotBase64 = screenshotService.captureFullScrollableScreenshot(fullContentWidth, fullContentHeight)
    // 这里可以处理截图的base64字符串，比如保存到本地或者上传
}) {
    Text("捕获完整长截图")
}

进阶优化：只捕获滚动Column的内容（排除其他UI） #

如果你的页面还有导航栏、底部按钮这些无关内容，不想把它们也截进去，可以给滚动Column的外层Box加个tag，然后在iOS端通过tag找到这个特定的View，只绘制它的层级：

共享层加tag： #

Box(
    modifier = Modifier
        .fillMaxWidth()
        .tag("scrollable_content_root") // 加个唯一标识的tag
        .onGloballyPositioned { /* 记录尺寸 */ }
) {
    // 滚动Column
}

iOS端通过tag找目标View： #

在captureFullScrollableScreenshot方法里，把原来的rootView替换成通过tag找到的View：

// 替换原来的rootView相关代码
val targetView = rootView.viewWithTag("scrollable_content_root") ?: return@forEach
val success = targetView.drawViewHierarchyInRect(fullBounds, true)

关键要点总结 #

• 一定要在共享层拿到完整内容的真实尺寸，不能用屏幕可视区域的尺寸凑数
• iOS端必须创建对应完整尺寸的绘图上下文，才能装下所有滚动内容
• 绘制的是目标View的完整层级，而不是只绘制可视区域的部分

内容来源于stack exchange