为什么手势开始在 SwiftUI 框架外工作？

Question

我有一个 Rec，我可以在手势动作中移动它，但问题是手势开始在其框架外捕获手势，我希望它只是在框架内工作。这是有关问题的代码和gif：

动图：

代码：

    struct ContentView: View {
    
    @State private var recLocation: CGFloat = CGFloat()
    @GestureState private var recTranslation: CGFloat = CGFloat()
    
    var body: some View {
        
        GeometryReader { geometry in
            
            Rectangle().fill(Color.red).frame(width: 50, height: 50, alignment: .center)
                .position(x: recLocation + recTranslation + 25, y: geometry.size.height/2)
                .gesture( DragGesture()
                            .updating($recTranslation) { value, state, translation in
                                state = value.translation.width
                            }
                            .onEnded { value in
                                recLocation = recLocation + value.translation.width
                            } )
            
            
        }
        
    }
}

Answer 1

据我所知，每次我使用GeometryReader容器的大小都会变得混乱，从你发布这个问题的第一分钟起，我就试图找到解决方案，因为它非常有趣，这里是如何克服这个问题：

GeometryReader { geometry in
    
    Rectangle()
        .fill(Color.red)
        .frame(width: 50, height: 50)
        .position(x: recLocation + recTranslation + 25, y: geometry.size.height/2)
        .overlay(
            Rectangle()
                .fill(Color.blue)
                .frame(width: 23.5, height: 23.5)
                .position(x: recLocation + recTranslation + 25, y: geometry.size.height/2)
                .opacity(0.001)
                .gesture( DragGesture()
                            .updating($recTranslation) { value, state, translation in
                                state = value.translation.width
                            }
                            .onEnded { value in
                                recLocation = recLocation + value.translation.width
                            } )
        )
    
}.frame(width: 50, height: 50)
}

解释：

基本上我看到的是，DragGesture在您的矩形边界之外检测到 ，因此我创建了一个Overlay具有相同形状和较小尺寸的 ，并将DragGesture设为Overlay。

注意：不要忘记将Overlay形状设置Opacity为 0.001，这样它将不可见，但仍然可以交互。

瞧！一切看起来都很完美。