swift - 如何获取自定义形状的 .onHover(...) 事件

Question

假设您有一个圆圈。当您将鼠标悬停在圆圈内时如何更改其颜色？

我试过了

struct ContentView: View {
    @State var hovered = false

    var body: some View {
        Circle()
            .foregroundColor(hovered ? .purple : .blue)
            .onHover { self.hovered = $0 }
    }
}

但这会导致 hovered 为 true，即使鼠标位于圆之外(但仍在其边界框内)。

我注意到 .onTapGesture(...) 使用实际形状的 HitTest ，而不是其边界框的 HitTest 。

那么我们怎样才能拥有与点击手势类似的点击测试行为，但对于悬停呢？

Answer 1

答案取决于您需要的精度。 SwiftUI 中的鼠标当前仅监视 MouseEnter 和 MouseExit 事件，因此 View 的工作区域是框架，它是一个 矩形。

您可以在ZStack中构建一个backgroundView，它可以使用自定义算法组合这些矩形。在圆形中，它应该像一个由不同的小矩形组成的矩阵。一个过于简单的示例可能如下所示。

  ZStack{
                            VStack{
                            HStack{
                                Rectangle().frame( width:100, height: 100).offset(x: -50, y: 0)
                                Rectangle().frame( width:100, height: 100).offset(x: 50, y: 0)
                                }}.onHover{print($0)}
                            Rectangle().foregroundColor(hovered ? .purple : .blue).clipShape(Circle())
                        }