iOS15下SwiftUI视图转图片异常问题求助

在iOS15环境下，使用现有snapshot方法将SwiftUI视图转为图片时，会出现内容渲染不完整、布局偏移的问题，实际截图无法完整呈现预期的视图内容。

问题根源 #

1. 原UIHostingController的视图未添加到窗口，导致视图未经过完整的布局与渲染流程，intrinsicContentSize计算不准确。
2. 网络图片为异步加载，截图操作触发时图片可能尚未完成加载，导致截图缺失图片内容。

修复方案 #

1. 改进视图截图方法 #

将UIHostingController的视图临时添加到窗口，确保完成布局后再进行截图，同时改用异步方式处理：

extension View {
    func snapshot() async -> UIImage {
        let controller = UIHostingController(rootView: self)
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = controller
        window.isHidden = false
        
        // 等待视图完成布局
        await controller.view.layoutIfNeeded()
        
        let targetSize = controller.view.intrinsicContentSize
        controller.view.bounds = CGRect(origin: .zero, size: targetSize)
        
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        let image = renderer.image { context in
            controller.view.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
        
        window.isHidden = true
        return image
    }
}

2. 处理异步网络图片加载 #

添加图片加载完成状态标记，确保截图时图片已加载完毕：

// 在视图结构体中添加状态变量
@State private var imageLoaded = false
@State private var image = UIImage()

var imageView: some View {
    VStack {
        ZStack(alignment: .top) {
            Color.red
            
            VStack {
                VStack {
                    HStack(alignment: .top) {
                        Rectangle()
                            .frame(width: 56, height: 56)
                            .cornerRadius(28)
                        
                        VStack {
                            HStack {
                                Text("Yura Filin")
                                    .font(.system(size: 16))
                                Spacer()
                            }
                            .padding(.bottom, 1)
                            
                            HStack {
                                Text("qweqwewqeqqweqeasd asd asd aosidhsa doaid adoaid adiad hiu uh i hiu ih uhuih iuhiu ih asdi ")
                                    .lineLimit(90)
                                    .multilineTextAlignment(.leading)
                                    .font(.system(size: 16))
                                Spacer()
                            }
                            .padding(.bottom, 2)
                            
                            HStack {
                                Image(uiImage: image)
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: (286 - 64 - 12))
                                    .onReceive(imageLoader.didChange) { data in
                                        self.image = UIImage(data: data) ?? UIImage()
                                        self.imageLoaded = true // 标记图片加载完成
                                    }
                                    .cornerRadius(14)
                                Spacer()
                            }
                            Spacer()
                        }
                        .padding(.leading, 12)
                    }
                }
                .padding(16)
                .background(.green)
                .cornerRadius(12)
            }
            .padding(64)
        }
    }
    .ignoresSafeArea()
}

3. 修改截图触发逻辑 #

使用异步任务等待图片加载完成后再执行截图：

var body: some View {
    VStack {
        imageView
        
        Spacer(minLength: 200)
        
        Button {
            Task {
                // 等待图片加载完成
                while !imageLoaded {
                    try? await Task.sleep(nanoseconds: 100_000_000)
                }
                let snapshot = await imageView.snapshot()
                UIImageWriteToSavedPhotosAlbum(snapshot, nil, nil, nil)
            }
        } label: {
            Label("Save to Photos", systemImage: "photo")
        }
    }
}

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