ios - 将 SwiftUI View 转换为图像时，它无法按预期工作

Question

我的目标是将 SwiftUI View 转换为图像。我目前正在为 iOS 15 构建它 这是将 View 转换为图像的代码

extension View {
    func snapshot() -> UIImage {
        let controller = UIHostingController(rootView: self)
        let view = controller.view

        
        let targetSize = controller.view.intrinsicContentSize
        
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear

        let renderer = UIGraphicsImageRenderer(size: targetSize)

        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

预期结果:https://share.cleanshot.com/5Pvzb7

实际结果:https://share.cleanshot.com/O4GKUF

下面是具有按钮和 ImageView 的 View 主体

var body: some View {
        VStack {
            
            imageView
            
            Spacer(minLength: 200)
            
            Button {
                UIImageWriteToSavedPhotosAlbum(imageView.snapshot(), nil, nil, nil)
                
            } label: {
                Label("Save to Photos", systemImage: "photo")
            }
        }
    }

Imageview 使用数据进行硬编码，图像从互联网加载

    var imageView: some View {
        VStack {
            ZStack(alignment: .top) {
                
                Color.red
                
                VStack {
                    VStack {
                        HStack(alignment: .top) {
                            Rectangle.init().frame(width: 56, height: 56).cornerRadius(28)
                            
                            VStack {
                                HStack {
                                    Text.init("Yura Filin").font(.system(size: 16))
                                    Spacer()
                                }.padding(.bottom, 1)
                                
                                HStack {
                                    Text.init("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() }.cornerRadius(14)
                                    Spacer()
                                }
                                Spacer()
                            }.padding(.leading, 12).readSize { size in
                                print(size)
                            }
                        }
                    }.padding(16).background(.green).cornerRadius(12)
                }.padding(64)
            }
        }.ignoresSafeArea()
    }

感谢任何帮助。谢谢!

Answer 1

与渲染通常的 View 并且该 View 的大小受设备限制时不同，这里不会发生这种情况。因此，您需要将具有定义宽度(可能还有高度)的框架应用于您正在捕获的 View 。

当我需要这样做时，我创建了另一个不渲染给用户的 View ，并仅将其用于渲染图像。这样，您必须在框架中定义的任何尺寸都不会扰乱用户所看到的内容。

您可能需要一段时间才能做到正确，但请尝试将具有所需宽度的帧修改器添加到您正在渲染的 View 中。 😊