如何使UIHostingController高度适配内部图片，优化缩放后滚动区域？

问题分析 #

当前实现中，UIHostingController的view依赖autoresizingMask布局，导致缩放后scrollView的contentSize无法与图片实际尺寸同步，出现滚动区域过高的问题。要实现iOS相册级的缩放滚动效果，需要让scrollView的contentSize严格跟随图片缩放后的尺寸，同时让UIHostingController的view精准匹配内部图片大小。

修复方案 #

核心修改点 #

• 移除autoresizingMask，改用AutoLayout约束绑定hostedView与scrollView的宽度，高度由内容自身决定
• 通过scrollView代理监听缩放事件，实时更新contentSize以匹配当前内容尺寸
• 强制UIHostingController重新计算内部内容的固有尺寸，消除多余空白区域

修改后的完整代码 #

struct ContentView: View {
    var body: some View {
        ZoomableScrollView {
            Image(systemName: "star")
                .resizable()
                .background(Color.yellow)
                .scaledToFit()
        }
    }
}

struct ZoomableScrollView<Content: View>: UIViewRepresentable {
    private var content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.delegate = context.coordinator
        scrollView.maximumZoomScale = 20
        scrollView.minimumZoomScale = 1
        scrollView.bouncesZoom = true
        scrollView.bounces = true
        
        let hostedView = context.coordinator.hostingController.view!
        hostedView.backgroundColor = .blue
        hostedView.translatesAutoresizingMaskIntoConstraints = false
        
        scrollView.addSubview(hostedView)
        
        // 绑定hostedView宽度与scrollView一致，高度由内容决定
        NSLayoutConstraint.activate([
            hostedView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            hostedView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostedView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostedView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor)
        ])
        
        return scrollView
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(hostingController: UIHostingController(rootView: content))
    }

    func updateUIView(_ uiView: UIScrollView, context: Context) {
        context.coordinator.hostingController.rootView = content
        // 异步更新contentSize，确保内容尺寸计算完成
        DispatchQueue.main.async {
            uiView.contentSize = context.coordinator.hostingController.view.intrinsicContentSize
        }
    }

    class Coordinator: NSObject, UIScrollViewDelegate {
        var hostingController: UIHostingController<Content>

        init(hostingController: UIHostingController<Content>) {
            self.hostingController = hostingController
            super.init()
            // 强制重新计算内容固有尺寸
            hostingController.view.invalidateIntrinsicContentSize()
        }

        func viewForZooming(in scrollView: UIScrollView) -> UIView? {
            hostingController.view
        }
        
        func scrollViewDidZoom(_ scrollView: UIScrollView) {
            // 缩放完成后同步更新contentSize
            scrollView.contentSize = hostingController.view.intrinsicContentSize
        }
    }
}

补充说明 #

• scrollViewDidZoom代理方法确保缩放过程中滚动区域始终贴合图片实际大小
• AutoLayout约束保证初始状态下图片充满scrollView宽度，高度自适应
• invalidateIntrinsicContentSize强制UIHostingController重新计算内部内容尺寸，避免残留空白区域

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