如何在Jetpack Compose中截取可滚动Column的完整屏幕？

原代码依赖View的drawingCache只能捕获当前可见区域，因为滚动Column的非可见部分不会被渲染到缓存中。要实现完整内容截图，需要利用Compose的绘制API强制渲染整个Column内容，具体修改如下：

步骤1：获取Column完整尺寸 #

给Column添加onSizeChanged modifier，记录整个内容的完整尺寸：

@Composable
fun MyScreen() {
    val activity = LocalContext.current as Activity
    val composeView = LocalView.current as ComposeView
    // 保存Column完整尺寸
    val columnFullSize = remember { mutableStateOf(IntSize.Zero) }

    Scaffold(floatingActionButton = {
        FloatingActionButton(onClick = {
            // 保存到应用私有目录无需权限，可直接调用截图逻辑
            captureAndSaveFullScreenshot(composeView, columnFullSize.value, activity.filesDir)
        }) {
            Icon(Icons.Default.Share, contentDescription = "分享截图")
        }
    }) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(padding)
                .padding(bottom = 32.dp)
                // 监听Column完整尺寸变化
                .onSizeChanged { size ->
                    columnFullSize.value = size
                }
        ) {
            if (!dataMap.isNullOrEmpty()) {
                dataMap.entries.forEachIndexed { index, (key, value) ->
                    val header = key
                    val list = value

                    // 修正原代码笔误：将title改为header
                    Text(text = header)

                    list.forEach { item ->
                        ItemUi(item)
                    }
                }
            }
        }
    }
}

步骤2：实现完整内容截图逻辑 #

使用Compose的PictureRecorder捕获整个Column的绘制内容，生成完整Bitmap：

private fun captureAndSaveFullScreenshot(
    composeView: ComposeView,
    contentSize: IntSize,
    saveDir: File
): File? {
    if (contentSize.width == 0 || contentSize.height == 0) return null

    return try {
        val density = composeView.resources.displayMetrics.density
        // 转换为像素尺寸
        val widthPx = (contentSize.width * density).toInt()
        val heightPx = (contentSize.height * density).toInt()

        // 记录Compose内容绘制
        val recorder = PictureRecorder()
        val canvas = Canvas(recorder)
        // 适配屏幕密度
        canvas.scale(density, density)

        // 强制ComposeView绘制完整内容到Canvas
        composeView.draw(canvas)

        // 生成Bitmap
        val picture = recorder.endRecording()
        val bitmap = Bitmap.createBitmap(widthPx, heightPx, Bitmap.Config.ARGB_8888)
        val androidCanvas = android.graphics.Canvas(bitmap)
        androidCanvas.scale(density, density)
        picture.draw(androidCanvas)

        // 保存Bitmap到文件
        saveBitmapToFile(bitmap, saveDir)
    } catch (e: Exception) {
        e.printStackTrace()
        null
    }
}

private fun saveBitmapToFile(bitmap: Bitmap, dir: File): File? {
    return try {
        val dateText = DateFormat.format("yyyy-MM-dd_hh:mm:ss", Date())
        val imageFile = File(dir, "result-$dateText.jpeg")
        FileOutputStream(imageFile).use { fos ->
            bitmap.compress(Bitmap.CompressFormat.JPEG, 50, fos)
            fos.flush()
        }
        bitmap.recycle() // 回收Bitmap避免内存泄漏
        imageFile
    } catch (e: FileNotFoundException) {
        e.printStackTrace()
        null
    } catch (e: IOException) {
        e.printStackTrace()
        null
    }
}

关键说明 #

1. Modifier顺序：将fillMaxSize()放在verticalScroll()之前，确保Column先获取父布局可用空间，再启用滚动。
2. 权限优化：保存到activity.filesDir（应用私有内部存储）无需申请外部存储权限，可直接移除原代码中的权限请求逻辑。
3. 绘制原理：通过PictureRecorder记录Compose的完整绘制指令，再将指令绘制到对应尺寸的Bitmap上，从而获取滚动Column的全部内容。

内容的提问来源于stack exchange，提问作者dev.farmer