如何对SwiftUI List全部内容截图而非仅捕获可见区域？

实现原理 #

SwiftUI 表单样式的List底层基于UIKit的UITableView实现，普通View转图片方案只会渲染当前可见区域的节点，无法捕获滚出屏幕外的内容。我们可以通过临时将List的渲染尺寸调整为其完整内容尺寸，离线渲染完成后再恢复原有尺寸的方式，实现全量内容截图，无需替换为ScrollView+VStack方案。

核心代码实现 #

1. 基础扩展 #

import SwiftUI
import UIKit

extension View {
    func snapshotFullList() -> UIImage? {
        let rootController = UIHostingController(rootView: self)
        rootController.loadViewIfNeeded()
        guard let rootView = rootController.view else { return nil }
        
        // 递归定位List底层的UITableView实例
        func findTableView(in view: UIView) -> UITableView? {
            for subview in view.subviews {
                if let tableView = subview as? UITableView {
                    return tableView
                }
                if let target = findTableView(in: subview) {
                    return target
                }
            }
            return nil
        }
        
        guard let tableView = findTableView(in: rootView) else { return nil }
        let originalOffset = tableView.contentOffset
        let originalFrame = tableView.frame
        tableView.contentOffset = .zero
        tableView.frame = CGRect(origin: .zero, size: tableView.contentSize)
        
        UIGraphicsBeginImageContextWithOptions(tableView.contentSize, false, UIScreen.main.scale)
        defer {
            UIGraphicsEndImageContext()
            // 恢复列表原有状态
            tableView.contentOffset = originalOffset
            tableView.frame = originalFrame
        }
        
        tableView.drawHierarchy(in: tableView.bounds, afterScreenUpdates: true)
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

2. 调用示例 #

struct FormListDemo: View {
    @State private var items = Array(0...50).map { "列表项 \($0)" }
    
    var body: some View {
        NavigationStack {
            List {
                Section("分组1") {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                    }
                }
                Section("分组2") {
                    Toggle("功能开关", isOn: .constant(true))
                    TextField("输入项", text: .constant("测试内容"))
                }
            }
            .listStyle(.grouped) // 保留表单样式无需修改
            .navigationTitle("表单列表")
            .toolbar {
                Button("全量截图") {
                    let fullImage = body.snapshotFullList()
                    // 此处可添加保存到相册/分享的业务逻辑
                }
            }
        }
    }
}

注意事项 #

• 若List包含大量单元格，全量渲染会产生短暂性能消耗，可根据业务需要添加加载提示
• 不要在列表滚动过程中触发截图，避免contentSize计算偏差，建议在列表静止状态调用
• 该方案兼容iOS 14及以上系统，如需适配更低版本可调整UITableView contentSize获取逻辑

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