如何在SwiftUI ViewModifier中调用底层UIKit视图？

当然可以在ViewModifier的上下文里结合UIKit实现需求，但不能直接在ViewModifier的body方法中操作SwiftUI视图的底层UIKit组件——因为SwiftUI采用声明式语法，视图的底层实例由框架管理，直接操作会破坏生命周期一致性。

可行的方案是通过UIViewRepresentable将SwiftUI的content包装到自定义UIView容器中，再在容器内添加UIKit子视图或CALayer。以下是具体实现步骤：

1. 定义承载SwiftUI内容的UIView子类 #

这个类负责托管SwiftUI视图，并添加你需要的UIKit元素：

import SwiftUI

class HostingContainerView: UIView {
    private var hostingController: UIHostingController<AnyView>?
    
    // 加载并布局SwiftUI内容
    func configure(with content: some View) {
        // 移除旧的托管视图（避免重复添加）
        hostingController?.view.removeFromSuperview()
        
        let newHostingController = UIHostingController(rootView: AnyView(content))
        newHostingController.view.translatesAutoresizingMaskIntoConstraints = false
        addSubview(newHostingController.view)
        
        // 让SwiftUI视图填满整个容器
        NSLayoutConstraint.activate([
            newHostingController.view.topAnchor.constraint(equalTo: topAnchor),
            newHostingController.view.leadingAnchor.constraint(equalTo: leadingAnchor),
            newHostingController.view.trailingAnchor.constraint(equalTo: trailingAnchor),
            newHostingController.view.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
        
        self.hostingController = newHostingController
        
        // 在这里添加UIKit子视图或CALayer
        addCustomUIKitSubview()
        addCustomCALayer()
    }
    
    // 添加UIKit子视图示例（比如一个居中的UILabel）
    private func addCustomUIKitSubview() {
        let tipLabel = UILabel()
        tipLabel.text = "来自UIKit的子视图"
        tipLabel.textColor = .systemRed
        tipLabel.font = .boldSystemFont(ofSize: 16)
        tipLabel.translatesAutoresizingMaskIntoConstraints = false
        addSubview(tipLabel)
        
        NSLayoutConstraint.activate([
            tipLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            tipLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
    
    // 添加CALayer示例（比如蓝色边框）
    private func addCustomCALayer() {
        let borderLayer = CALayer()
        borderLayer.borderWidth = 3
        borderLayer.borderColor = UIColor.systemBlue.cgColor
        borderLayer.frame = bounds
        layer.addSublayer(borderLayer)
        
        // 监听容器bounds变化，自动更新layer的frame
        layer.addObserver(self, forKeyPath: "bounds", options: .new, context: nil)
    }
    
    // 处理bounds变化的监听回调
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        guard keyPath == "bounds", let layer = object as? CALayer else {
            super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
            return
        }
        
        // 更新边框layer的frame
        layer.sublayers?.forEach { sublayer in
            if sublayer.borderWidth > 0 {
                sublayer.frame = layer.bounds
            }
        }
    }
    
    deinit {
        // 移除监听避免内存泄漏
        layer.removeObserver(self, forKeyPath: "bounds")
    }
}

2. 创建UIViewRepresentable包装器 #

这个结构体是SwiftUI和UIKit之间的桥梁：

struct UIKitContainer<Content: View>: UIViewRepresentable {
    let content: Content
    
    func makeUIView(context: Context) -> HostingContainerView {
        let container = HostingContainerView()
        container.configure(with: content)
        return container
    }
    
    func updateUIView(_ uiView: HostingContainerView, context: Context) {
        // SwiftUI视图更新时，重新配置内容
        uiView.configure(with: content)
    }
}

3. 实现你的ViewModifier #

现在可以在ViewModifier中使用这个包装器：

struct MyViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        UIKitContainer(content: content)
    }
}

// 给View添加扩展，方便链式调用
extension View {
    func withUIKitEnhancements() -> some View {
        self.modifier(MyViewModifier())
    }
}

4. 使用示例 #

在SwiftUI视图中直接调用这个modifier即可：

struct ContentView: View {
    var body: some View {
        Text("SwiftUI 原始视图")
            .font(.title)
            .padding()
            .withUIKitEnhancements() // 应用自定义modifier
    }
}

关键注意事项 #

• 避免直接操作SwiftUI视图的底层UIKit实例：SwiftUI会根据布局需求销毁或重建视图，直接操作会导致状态不一致。
• 处理视图更新：updateUIView会在SwiftUI状态变化时触发，要确保configure方法能正确清理旧内容并加载新内容。
• 内存管理：记得移除KVO监听、清理子视图，避免内存泄漏。

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