SwiftUI教程式视图高亮：深色遮罩挖空目标视图的实现问题

问题背景 #

我正在SwiftUI中构建一个教程框架，核心需求是定位特定视图，通过暗化屏幕其余区域来高亮目标视图。比如现有三个圆形视图，需要高亮蓝色圆形：思路是通过ZStack在顶层放置半透明黑色背景，再用反向遮罩在背景上挖空，露出下方的蓝色圆形。

现有实现的问题 #

最初的方案是在蓝色圆形的overlay内用GeometryReader获取视图的全局frame，并存到@State变量中，以此设置遮罩的位置和尺寸。虽然实现了挖空高亮效果，但出现了运行时错误：

Modifying state during view update, this will cause undefined behavior.

同时，这种实现方式繁琐，无法快速复用，理想状态是做成独立的可复用组件，只需指定目标视图就能自动添加带挖空的高亮覆盖层。

优化解决方案 #

核心改进点 #

• 用PreferenceKey传递视图布局信息，替代直接在GeometryReader中修改@State，避免视图更新时修改状态的错误。
• 将高亮逻辑封装成自定义ViewModifier，让调用更简洁，符合可复用框架的需求。

完整代码实现 #

1. 定义PreferenceKey传递布局信息

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

2. 封装高亮Overlay的Modifier

struct HighlightOverlayModifier: ViewModifier {
    @State private var targetFrame: CGRect = .zero
    let padding: CGFloat // 高亮区域的额外内边距
    
    func body(content: Content) -> some View {
        ZStack {
            // 原视图，通过overlay添加GeometryReader收集frame
            content
                .overlay(
                    GeometryReader { geo in
                        Color.clear
                            .preference(key: HighlightFramePreferenceKey.self, value: geo.frame(in: .global))
                    }
                )
            
            // 当获取到目标视图frame后，显示暗化背景+反向遮罩
            if !targetFrame.isEmpty {
                Color.black.opacity(0.75)
                    .edgesIgnoringSafeArea(.all)
                    .reverseMask {
                        // 这里用Circle匹配目标视图形状，可根据需求替换成其他形状
                        Circle()
                            .frame(width: targetFrame.width + padding, height: targetFrame.height + padding)
                            .position(x: targetFrame.midX, y: targetFrame.midY)
                    }
                    .ignoresSafeArea()
            }
        }
        // 监听PreferenceKey的变化，更新目标frame
        .onPreferenceChange(HighlightFramePreferenceKey.self) { newFrame in
            targetFrame = newFrame
        }
    }
}

// 扩展View，提供便捷调用方法
extension View {
    func highlightWithOverlay(padding: CGFloat = 10) -> some View {
        self.modifier(HighlightOverlayModifier(padding: padding))
    }
}

// 补充反向遮罩的实现（如果项目中还没有）
extension View {
    func reverseMask<Mask: View>(@ViewBuilder mask: () -> Mask) -> some View {
        self.mask(
            ZStack {
                Rectangle()
                mask()
                    .blendMode(.destinationOut)
            }
        )
    }
}

3. 调用示例

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Circle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
            
            // 只需给目标视图添加highlightWithOverlay()即可高亮
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .highlightWithOverlay()
            
            Circle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
        }
    }
}

方案优势 #

• 彻底解决了Modifying state during view update的运行时错误，遵循SwiftUI的状态更新规则。
• 实现了高度复用：任何视图只需添加.highlightWithOverlay()即可快速添加高亮效果，无需重复编写布局收集和遮罩逻辑。
• 灵活性强：可通过修改padding参数调整高亮区域的大小，也可替换遮罩内的形状（比如改成圆角矩形）适配不同视图。

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