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

Question

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

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 设置为@987654328 @。

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

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