iPad端SwiftUI视图渲染为图片时顶部出现白边异常问题

问题根因 #

该问题和开发环境无关，核心原因是UIHostingController在iPad设备上默认开启安全区自动适配：未嵌入导航栈/模态展示的托管控制器，会自动给内部视图增加顶部安全区偏移量（对应iPad顶部状态栏预留高度），导致实际渲染的视图内容整体向下偏移，顶部空出的区域无内容填充就会显示为白边。
iPhone设备对未加入视图层级的UIHostingController安全区计算逻辑不同，不会自动追加顶部偏移，因此同代码在iPhone上表现正常。

修复步骤 #

• 修改snapshot()扩展方法，关闭安全区自动偏移，强制视图完成布局后再渲染
• （可选）给待渲染的VStack显式设置间距为0，给矩形显式指定填充色，排除默认配置干扰

修正后的完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Snapshot") { 
                let image = snapshotView.snapshot()
                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
            }
        }
    }

    var snapshotView: some View {
        // 显式设置spacing为0，避免VStack默认间距引入空白
        VStack(spacing: 0) {
            Rectangle()
                .fill(.black) // 显式指定填充黑色，排除默认前景色异常
                .frame(width: 200, height: 200)
        }
    }
}

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
        
        // 关闭安全区自动偏移，解决iPad顶部预留空白问题
        controller.additionalSafeAreaInsets = .zero
        view?.insetsLayoutMarginsFromSafeArea = false
        // 强制布局完成，确保渲染时视图位置正确
        view?.layoutIfNeeded()
        
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

额外注意 #

iPad端保存图片到系统相册需要提前申请相册写入权限，记得在项目配置的Info.plist中添加NSPhotoLibraryAddUsageDescription字段并填写权限提示文案，否则会出现保存失败的问题。

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