修复SwiftUI中intrinsicContentSize导致生成超大图片的问题

问题描述 #

尝试将SwiftUI View渲染为图片时，发现视图中已缩小显示的图片，其intrinsicContentSize仍采用原始高度。例如一张原始高度4000px的图片在视图中仅显示约400px，但intrinsicContentSize判定高度仍为4000px，导致生成的图片高度异常巨大。

视图中的图片代码：

Image(uiImage: data.postPic)
    .resizable()
    .scaledToFit()
    .frame(maxWidth: UIScreen.main.bounds.width)

渲染用的扩展代码：

extension View {
    var asImage: UIImage {
        let controller = UIHostingController(rootView: self.edgesIgnoringSafeArea(.top))
        let view = controller.view
        let targetSize = controller.view.intrinsicContentSize
        print(targetSize)
        view?.bounds = CGRect(origin: CGPoint(x: 0, y: 0), size: targetSize)
        view?.backgroundColor = .clear

        let format = UIGraphicsImageRendererFormat()
        format.scale = 3
        let renderer = UIGraphicsImageRenderer(size: targetSize, format: format)
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

解决方案 #

方法一：强制视图完成布局后获取正确尺寸 #

intrinsicContentSize不会自动触发视图布局，导致尺寸计算错误。先让视图完成布局，再用sizeThatFits获取适配后的真实尺寸：

extension View {
    var asImage: UIImage {
        let controller = UIHostingController(rootView: self.edgesIgnoringSafeArea(.top))
        let view = controller.view
        
        // 设置初始尺寸并触发布局
        view?.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        view?.layoutIfNeeded()
        
        // 获取适配后的正确尺寸
        let targetSize = view?.sizeThatFits(CGSize(width: UIScreen.main.bounds.width, height: CGFloat.infinity)) ?? .zero
        print(targetSize)
        
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear

        let format = UIGraphicsImageRendererFormat()
        format.scale = 3
        let renderer = UIGraphicsImageRenderer(size: targetSize, format: format)
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

方法二：明确设置图片的缩放后尺寸 #

提前计算图片缩放后的高度，给图片设置明确的frame，避免intrinsicContentSize沿用原始图片尺寸：

// 先计算缩放后的图片高度
let image = data.postPic
let scaleFactor = UIScreen.main.bounds.width / image.size.width
let scaledHeight = image.size.height * scaleFactor

Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: UIScreen.main.bounds.width, height: scaledHeight)

方法三：使用GeometryReader动态适配尺寸 #

用GeometryReader获取父视图的可用宽度，动态计算图片高度并固定尺寸：

GeometryReader { proxy in
    Image(uiImage: data.postPic)
        .resizable()
        .scaledToFit()
        .frame(width: proxy.size.width)
        .fixedSize(horizontal: false, vertical: true)
}

这样intrinsicContentSize会基于实际显示的尺寸计算，不会再使用图片原始高度。

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