SwiftUI中如何为包装的UIKit子视图添加聚光灯引导效果？

SwiftUI层绘制聚光灯（侵入性低，推荐） #

核心思路是通过PreferenceKey将UIKit子视图的坐标同步到SwiftUI层，再用路径绘制挖空遮罩。

步骤与代码示例 #

1. 定义传递坐标的偏好键

struct TargetFramePreferenceKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        value = nextValue()
    }
}

2. 修改UIViewRepresentable，同步UIStackView的坐标到SwiftUI

struct ThirdPartyViewWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> ThirdPartyUIView {
        let view = ThirdPartyUIView()
        context.coordinator.stackView = view.stackView
        return view
    }
    
    func updateUIView(_ uiView: ThirdPartyUIView, context: Context) {
        guard let stackView = context.coordinator.stackView else { return }
        // 将UIStackView的frame转换为SwiftUI坐标系下的位置
        let globalFrame = stackView.convert(stackView.bounds, to: nil)
        if let rootView = UIApplication.shared.windows.first?.rootViewController?.view {
            let swiftUIFrame = rootView.convert(globalFrame, to: uiView)
            uiView.preference(key: TargetFramePreferenceKey.self, value: swiftUIFrame)
        }
    }
    
    func makeCoordinator() -> Coordinator { Coordinator() }
    
    class Coordinator {
        weak var stackView: UIStackView?
    }
}

3. 在SwiftUI的ZStack中绘制聚光灯遮罩

struct ContentView: View {
    @State private var targetFrame: CGRect = .zero
    
    var body: some View {
        ZStack {
            ThirdPartyViewWrapper()
                .onPreferenceChange(TargetFramePreferenceKey.self) { newFrame in
                    targetFrame = newFrame
                }
            
            // 半透明遮罩+挖空目标区域
            if !targetFrame.isEmpty {
                Color.black.opacity(0.7)
                    .overlay(
                        Path { path in
                            path.addRect(UIScreen.main.bounds)
                            path.addRect(targetFrame)
                        }
                        .fill(style: .init(eoFill: true))
                    )
                    .allowsHitTesting(false) // 不阻挡下层视图交互
            }
            
            // 已实现的引导气泡
            GuideBubbleView()
        }
    }
}

UIKit层直接绘制（适合复杂布局场景） #

如果第三方视图结构复杂，直接在UIKit层添加遮罩层，避免跨层坐标同步的麻烦。

步骤与代码示例 #

1. 给第三方UIView扩展聚光灯添加方法

extension ThirdPartyUIView {
    func addSpotlight(to targetStackView: UIStackView) {
        // 创建半透明遮罩
        let maskView = UIView(frame: bounds)
        maskView.backgroundColor = UIColor.black.withAlphaComponent(0.7)
        maskView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(maskView)
        
        // 绘制挖空路径
        let fullPath = UIBezierPath(rect: maskView.bounds)
        let targetPath = UIBezierPath(rect: targetStackView.frame)
        fullPath.append(targetPath)
        fullPath.usesEvenOddFillRule = true
        
        // 用形状层实现挖空效果
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = fullPath.cgPath
        shapeLayer.fillRule = .evenOdd
        maskView.layer.mask = shapeLayer
        
        // 允许目标区域接收交互
        maskView.isUserInteractionEnabled = false
    }
}

2. 在UIViewRepresentable中调用该方法

struct ThirdPartyViewWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> ThirdPartyUIView {
        let view = ThirdPartyUIView()
        view.addSpotlight(to: view.stackView)
        return view
    }
    
    func updateUIView(_ uiView: ThirdPartyUIView, context: Context) {
        // 若布局动态变化，可在此重新调用addSpotlight更新遮罩
    }
}

注意事项 #

• SwiftUI方案需监听视图布局变化（如屏幕旋转、子视图动态调整），确保targetFrame实时更新。
• UIKit方案若目标视图布局动态变化，需重写layoutSubviews方法，重新生成遮罩路径。

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