拖拽手势中如何检测手指移出元素边界？

要实现手指移出按钮范围时取消点击动作，核心是在手势结束时判断触摸点是否处于按钮的边界内。之前用GeometryReader包裹组件导致布局异常，是因为它默认会占满可用空间，正确的做法是用background附加GeometryReader来获取按钮的实际尺寸和位置，不会影响原有布局。

以下是修改后的完整代码：

struct CustomButton: View {
    @State private var taping = false
    @State private var buttonFrame:CGRect = .zero
    
    var body: some View {
        HStack {
            Text("Sample Text")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .background(
            GeometryReader { proxy in
                Color.clear
                    .onAppear {
                        // 获取按钮在全局坐标系中的frame
                        buttonFrame = proxy.frame(in: .global)
                    }
            }
        )
        .scaleEffect(taping ? 0.9 : 1)
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged { gesture in
                    // 初始按下时先判断是否在按钮内，避免从外部点触发动画
                    if buttonFrame.contains(gesture.startLocation) {
                        // 实时判断手指是否在按钮范围内，不在则关闭taping状态
                        taping = buttonFrame.contains(gesture.location)
                    }
                }
                .onEnded { gesture in
                    defer { taping = false } // 无论是否触发动作，最后都关闭taping
                    // 只有当结束时手指在按钮内，才执行点击动作
                    if buttonFrame.contains(gesture.location) {
                        print("执行按钮动作")
                        // 这里放你的按钮点击逻辑
                    }
                }
        )
    }
}

关键逻辑说明： #

• 获取按钮frame：通过background里的GeometryReader获取按钮在全局坐标系中的位置和尺寸，不会改变按钮的布局。
• 初始按下判断：在onChanged里先检查起始触摸点是否在按钮内，防止用户从按钮外开始拖拽时误触动画。
• 实时状态更新：拖拽过程中实时判断手指位置，移出按钮时立即恢复按钮的缩放状态。
• 结束时动作触发：只有当手势结束时手指仍在按钮范围内，才执行点击动作，最后统一关闭taping状态。

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