Clipped() 后 Hit Testing 区域不变？ SwiftUI 开发不可不知的技巧

在 SwiftUI 中掌控裁剪后的 Hit Testing 区域

SwiftUI 中的 clipped() 修饰符是形状控制和设计实现的利器。然而，它可能会带来一个常见的陷阱——裁剪后的 Hit Testing 区域不变。这意味着尽管视图的显示区域被裁剪，但其点击区域仍然是裁剪前的区域。

解决 Hit Testing 区域不变的问题

为了解决这个问题，我们有四种技巧：

• 使用 GeometryReader 获取视图 frame： GeometryReader 让我们了解视图在屏幕上的位置和大小，为确定点击区域提供基础。
• 使用 hitTest() 方法检测触摸事件： hitTest() 方法可以判断触摸事件是否发生在某个视图内，裁剪后的视图也不例外。
• 使用 makeCoordinator() 方法创建自定义协调器： 自定义协调器可以处理视图的用户交互，其中我们可以实现 hitTest() 方法来处理裁剪后视图内的触摸事件。
• 使用 gesture() 修饰符添加手势识别器： 手势识别器可以检测触摸事件并做出相应响应，弥补裁剪后的 Hit Testing 区域不变的缺陷。

避免 Hit Testing 区域不变的陷阱

在使用 clipped() 修饰符时，我们要注意一些陷阱：

• 避免在可交互元素上使用 clipped() 修饰符： 如果某个元素需要接收触摸事件，请不要使用 clipped() 修饰符，否则它将无法接收触摸事件。
• 正确处理 Hit Testing： 使用 clipped() 修饰符时，务必正确处理元素的 Hit Testing，可以使用上面提到的技巧。
• 考虑性能问题： clipped() 修饰符可能会影响应用程序性能，在使用时需要考虑。

代码示例

以下是一个使用 GeometryReader 和 hitTest() 方法解决 Hit Testing 区域不变问题的示例：

struct CustomButton: View {
    @State private var isPressed = false

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // 裁剪按钮的形状
                Circle()
                    .fill(Color.blue)
                    .clipped()
                    .frame(width: geometry.size.width, height: geometry.size.height)

                // 处理裁剪后按钮的 Hit Testing
                Button(action: {
                    isPressed.toggle()
                }) {
                    EmptyView()
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
                .background(Color.clear)
                .contentShape(Circle()) // 设置按钮的点击形状为圆形
                .hitTest { _, point in
                    let touchLocation = point - geometry.frame(in: .global).origin
                    return Circle(center: geometry.frame(in: .global).center, radius: geometry.size.width / 2).contains(touchLocation)
                }
            }
        }
    }
}

常见问题解答

• 为什么在裁剪后，视图的点击区域仍然是裁剪前的区域？
  裁剪只是改变了视图的显示区域，而 Hit Testing 区域仍然是原始的视图区域。

• 为什么需要正确处理裁剪后视图的 Hit Testing？
  如果不正确处理，裁剪后的视图将无法接收触摸事件，从而影响用户交互。

• 什么时候应该避免在可交互元素上使用 clipped() 修饰符？
  当元素需要接收触摸事件时，应该避免使用 clipped() 修饰符。

• 如何考虑 clipped() 修饰符的性能问题？
  复杂形状的裁剪可能需要大量的计算资源，影响应用程序性能。

• 可以使用哪些其他方法来解决裁剪后的 Hit Testing 区域不变的问题？
  除了上述技巧外，还可以使用遮罩（Mask）或形状（Shape）来控制视图的显示和 Hit Testing 区域。