SwiftUI实现仅鼠标悬停Circle时变色，避免进入Frame即触发

当前代码里，.onHover修饰符被附加到了包含Circle、黑色背景和200x200 frame的整个视图组合上，导致鼠标进入整个frame范围就会触发颜色变化，而非仅识别Circle区域。

解决方案 #

调整视图布局与修饰符顺序，将.onHover直接绑定到Circle上，同时分离背景层与Circle，确保hover事件仅由Circle触发。

修改后的代码 #

import SwiftUI

struct ContentView: View {
    @State private var snapCircleHover: Bool = false
    var body: some View {
        VStack {
            ZStack {
                // 底层黑色背景，不响应hover事件
                Color.black
                    .frame(width: 200, height: 200)
                
                // 上层Circle，仅自身响应hover
                Circle()
                    .fill(snapCircleHover ? .yellow : .green)
                    .onHover { snapCircleHover = $0 }
                    .frame(width: 100, height: 100)
            }
        }
    }
}

代码说明 #

• 用ZStack将背景和Circle分层，背景作为底层视图不添加hover修饰符，避免干扰Circle的hover检测。
• 将.onHover直接附加到Circle的修饰链中，确保只有鼠标悬停在Circle区域时才会触发状态变更。
• 简化.onHover逻辑，直接将传入的布尔值赋值给状态变量，替代冗余的if-else判断。
• 给Circle设置独立的frame控制大小，替代原代码中的position，让布局更符合SwiftUI声明式风格，避免视图范围混淆。

如果需要保留原代码中Circle的位置逻辑（非居中），可调整Circle的位置修饰符，仍需确保.onHover仅作用于Circle：

import SwiftUI

struct ContentView: View {
    @State private var snapCircleHover: Bool = false
    var body: some View {
        VStack {
            ZStack {
                Color.black
                    .frame(width: 200, height: 200)
                
                Circle()
                    .fill(snapCircleHover ? .yellow : .green)
                    .onHover { snapCircleHover = $0 }
                    .frame(width: 100, height: 100)
                    .position(CGPoint(x: 100, y: 100)) // 保留原位置设置
            }
        }
    }
}

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