SwiftUI视图快照drawHierarchy阻塞主线程，如何后台执行？

你的同步快照方法会阻塞主线程，核心原因是drawHierarchy(afterScreenUpdates: true)会强制视图立即完成布局和渲染，这部分操作在主线程执行，耗时较长时会导致UI卡顿、加载动画停止。下面提供两种解决方案：

方案一：使用系统异步快照API（iOS 16+/macOS 13+） #

苹果在iOS 16及以上版本提供了原生的异步快照方法，无需自行实现，且经过系统优化，不会阻塞主线程。

扩展代码：

extension View {
    func snapshotAsync() async -> UIImage {
        await self.ignoresSafeArea().snapshot()
    }
}

使用示例：

// 在异步任务中调用
Task {
    let snapshotImage = await yourView.snapshotAsync()
    // 回到主线程处理快照（比如更新UI）
    DispatchQueue.main.async {
        yourImageView.image = snapshotImage
    }
}

方案二：自定义异步快照（兼容iOS 15及以下） #

如果需要兼容低版本系统，可以将快照的耗时渲染操作移到后台线程，主线程仅处理必要的视图初始化和布局：

扩展代码：

extension View {
    func snapshot(completion: @escaping (UIImage?) -> Void) {
        DispatchQueue.main.async {
            let controller = UIHostingController(rootView: self.ignoresSafeArea())
            guard let view = controller.view else {
                completion(nil)
                return
            }
            
            let targetSize = controller.view.intrinsicContentSize
            view.bounds = CGRect(origin: .zero, size: targetSize)
            view.backgroundColor = .clear
            // 强制视图完成布局，避免后续渲染时的同步阻塞
            view.layoutIfNeeded()
            
            // 将渲染操作放到后台队列
            DispatchQueue.global(qos: .userInitiated).async {
                let format = UIGraphicsImageRendererFormat()
                format.scale = UIScreen.main.scale // 保持屏幕清晰度
                let renderer = UIGraphicsImageRenderer(size: targetSize, format: format)
                
                let image = renderer.image { context in
                    // 关闭afterScreenUpdates，因为已经完成布局
                    view.drawHierarchy(in: view.bounds, afterScreenUpdates: false)
                }
                
                // 回到主线程返回结果
                DispatchQueue.main.async {
                    completion(image)
                }
            }
        }
    }
}

使用示例：

yourView.snapshot { image in
    guard let snapshotImage = image else { return }
    // 在主线程处理快照
    yourImageView.image = snapshotImage
}

关键优化点： #

• 将afterScreenUpdates设为false：因为已经在主线程调用layoutIfNeeded()完成布局，无需强制同步更新，避免阻塞主线程。
• 后台渲染：把UIGraphicsImageRenderer的渲染操作放到全局队列，主线程只处理轻量的视图初始化和布局，不影响UI动画。
• 主线程返回结果：UI操作必须在主线程执行，所以通过completion闭包回到主线程处理快照。

注意事项： #

如果视图包含异步加载的内容（如网络图片），需要确保内容加载完成后再调用快照方法，否则会捕获到未加载完成的状态。

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