包含onAppear逻辑的SwiftUI View转UIImage渲染异常问题

问题根源 #

你当前的写法存在两个核心问题，导致快照无法捕获onAppear修改后的状态：

• onAppear只有当视图被真正添加到活跃的视图层级时才会触发，直接初始化AGreatView就调用快照时，对应的UIHostingController视图没有被挂载到任何窗口上，onAppear根本不会执行
• 即使onAppear触发，@State属性的更新是异步的，同步调用快照方法时状态更新还没有完成渲染，自然拿不到修改后的宽度

解决方法 #

方案1：无强依赖onAppear的场景（最简洁） #

如果宽度设置逻辑不需要强绑定onAppear生命周期，直接修改AGreatView的状态初始化逻辑即可，避免依赖生命周期触发：

struct AGreatView: View {
    // 直接初始化需要的宽度，不需要等onAppear修改
    @State var width = 50.0
    var body: some View {
        VStack {
            Text("Some text")
            Color.green.frame(width: width, height: 10)
        }.padding()
         .background(Color.red.opacity(0.1))
    }
}

该场景下原有快照方法不需要任何修改即可得到预期结果。

方案2：必须保留onAppear逻辑的场景 #

如果业务逻辑必须要在onAppear里执行状态修改，就需要把快照方法改造为异步实现，等待视图挂载、状态更新完成后再生成快照：

1. 改造View的快照扩展为异步回调形式：

extension View {
    func snapshot(completion: @escaping (UIImage) -> Void) {
        let controller = UIHostingController(rootView: self)
        let view = controller.view!
        
        // 先初始化基础布局参数
        let initialSize = controller.view.intrinsicContentSize
        view.bounds = CGRect(origin: .zero, size: initialSize)
        
        // 创建临时window挂载视图，触发onAppear
        let tempWindow = UIWindow(frame: view.bounds)
        tempWindow.rootViewController = UIViewController()
        tempWindow.addSubview(view)
        tempWindow.isHidden = false
        
        // 等待下一个runloop，保证onAppear逻辑和状态更新都执行完成
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            // 重新计算状态更新后的真实尺寸
            let targetSize = view.intrinsicContentSize
            view.bounds = CGRect(origin: .zero, size: targetSize)
            
            let renderer = UIGraphicsImageRenderer(size: targetSize)
            let image = renderer.image { _ in
                view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
            }
            
            // 清理临时视图避免内存泄漏
            view.removeFromSuperview()
            completion(image)
        }
    }
}

2. 修改按钮点击的调用逻辑：

Button("Make a snapshot of a great view", action: {
    let view = AGreatView()
    view.animation(nil).snapshot { [self] image in
        uiImage = image
    }
})

如果想要更精准的控制，不需要依赖固定延迟，可以给AGreatView新增状态更新完成的回调，在onAppear修改完属性后触发回调再执行快照：

struct AGreatView: View {
    @State var width = 0.0
    // 新增状态更新完成回调
    var onStateReady: (() -> Void)?
    var body: some View {
        VStack {
            Text("Some text")
            Color.green.frame(width: width, height: 10)
        }.padding()
         .background(Color.red.opacity(0.1))
         .onAppear {
             width = 50
             DispatchQueue.main.async {
                 onStateReady?()
             }
         }
    }
}

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