SwiftUI中UIGraphicsImageRenderer截取长View返回空白图的解决方法

问题根源 #

1. ScrollView的intrinsicContentSize不会反映内部内容的真实高度，它的尺寸默认适配屏幕可见区域，而非完整内容。
2. 直接创建的UIHostingController未加入视图层级，视图未完成布局就调用drawHierarchy，导致渲染失败。

解决方案一：提取内容视图单独截图 #

这是最直接的方案，因为我们需要的是完整内容而非ScrollView的滚动容器。

步骤1：拆分视图结构 #

把ScrollView内部的内容单独抽成一个视图：

struct ExtractedView: View {
    var body: some View {
        ScrollView {
            ContentView()
        }
    }
}

// 用于截图的完整内容视图
struct ContentView: View {
    var body: some View {
        let contentStr = "About 2000 word long piece of text"
        Text(contentStr)
            .frame(maxWidth: UIScreen.main.bounds.width, maxHeight: .infinity)
            .padding()
    }
}

步骤2：修正截图扩展 #

确保视图完成布局后再渲染：

extension View {
    func saveToImage() -> UIImage? {
        let controller = UIHostingController(rootView: self)
        guard let view = controller.view else { return nil }
        
        // 创建临时窗口让视图完成布局
        let tempWindow = UIWindow(frame: UIScreen.main.bounds)
        tempWindow.rootViewController = controller
        tempWindow.makeKeyAndVisible()
        
        // 强制触发布局，确保尺寸计算准确
        view.layoutIfNeeded()
        
        guard let targetSize = view.intrinsicContentSize else {
            tempWindow.isHidden = true
            return nil
        }
        view.bounds = CGRect(origin: .zero, size: targetSize)
        
        // 渲染图片
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        let image = renderer.image { context in
            view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
        }
        
        // 清理临时窗口，避免内存泄漏
        tempWindow.isHidden = true
        
        return image
    }
}

步骤3：修改截图调用 #

直接截图内容视图而非ScrollView：

@MainActor func renderToImage() -> UIImage? {
    return ContentView().saveToImage()
}

解决方案二：强制ScrollView适配内容尺寸 #

如果需要保留ScrollView的样式（比如自定义滚动条、背景），可以让ScrollView的尺寸等于内部内容的尺寸，再进行截图：

修改ExtractedView #

struct ExtractedView: View {
    @State private var contentSize: CGSize = .zero
    
    var body: some View {
        ScrollView {
            Text("About 2000 word long piece of text")
                .frame(maxWidth: UIScreen.main.bounds.width, maxHeight: .infinity)
                .padding()
                .background(
                    // 用GeometryReader获取内容真实尺寸
                    GeometryReader { proxy in
                        Color.clear
                            .onAppear {
                                contentSize = proxy.size
                            }
                    }
                )
        }
        // 让ScrollView尺寸匹配内容尺寸
        .frame(width: contentSize.width, height: contentSize.height)
    }
}

然后直接调用原来的截图方法即可，此时ScrollView会完整显示所有内容，不会出现滚动，截图就能得到完整长图。

内容的提问来源于stack exchange，提问作者黄仁康