Swift DragGesture 可点击区域检测到视图之外的触摸？

Question

我有以下代码：

struct ContentView: View {
    
    @State var progress:Float = 0.3
    
    var body: some View {
        ASlider(progress: $progress)
                .frame(width: 300, height: 40)
    }
}


struct ASlider: View {
    
    @Binding var progress: Float
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .foregroundColor(.gray)
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: geometry.size.width * CGFloat(progress / 1))
                
            }
            .cornerRadius(12)
            .contentShape(Rectangle()) <<<---- still detects touches outside the bounds...
            .gesture(DragGesture(minimumDistance: 0)
                        .onChanged({ value in
                print("Touch: \(value)")
                progress = min(max(0, Float(value.location.x / geometry.size.width * 1)), 1)
            }))
        }
        .border(.green)
    }
}

我不明白为什么在 ZStack 边界之外检测到手势。

日志显示如下：

触摸：值（时间：2001-01-04 15:55:29 +0000，位置：（67.0， -12.333338419596316），startLocation：（130.3333282470703，-11.333338419596316），速度：SwiftUI._Velocity<__c.cgsize>（valuePerSecond：（-133.40537913839276， 10.334994031205905)))

如您所见，该位置确实检测到 Y 的负值，例如当点击滑块上方而不是内部时。

为什么在添加手势的视图边界之外检测到手势？

Answer 1

当您的应用程序中只有一个手势时，这个问题或者我会说免费优势是自动开箱即用的，Apple API 尝试通过提供比开发人员计划的更多手势区域来使其更加用户友好！无法打开或关闭此功能，但您可以使用以下方法：

struct ContentView: View {
    
    @State var progress:Float = 0.3
    
    var body: some View {

        Color.white.onTapGesture { print("white") }
        .overlay(
        
            ASlider(progress: $progress)
                .frame(width: 300, height: 40)
        )
    }
}


struct ASlider: View {
    
    @Binding var progress: Float
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .foregroundColor(.gray)
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: geometry.size.width * CGFloat(progress / 1))
            }
            .cornerRadius(12)
            .gesture(DragGesture(minimumDistance: .zero, coordinateSpace: .local)
                        .onChanged({ value in
                            print("Touch: \(value)")
                            progress = min(max(0, Float(value.location.x / geometry.size.width * 1)), 1)
                        }))
        }
        .border(Color.green)
        
    }
}