Wie kann ich die Position X für den Versatz im exakten Abgriffspunkt für eine Ansicht in SwiftUI aktualisieren?

Question

Ich versuche, meinen Rec-Offset mit der Drag-Geste dieses Rec zu aktualisieren. Ich habe bereits so codiert, dass sich der Rec abhängig vom Drag selbst bewegt und dem Drag folgt, während ich codiert habe. Das Problem, das ich dabei bekomme, ist, dass er selbst zentriert wird Immer und ich kann Rec nicht aus dem Bildschirm ziehen. Mein Ziel ist es, so zu codieren, dass der Offset mit der Position des Tags zusammenarbeitet und zur Quelle für den Offset wird. Jetzt ist die Quelle das Zentrum, das ich gerne dynamisch und flexibel mag Tippen Sie auf Rec. Wie soll ich das codieren?

    struct ContentView: View {
    

    @State var locationX: CGFloat = .zero
    let widthOfRec: CGFloat = 200
    
    var body: some View {

        Rectangle()
            .fill(Color.red)
            .frame(width: widthOfRec)
            .border(Color.black)
            .offset(x: locationX - widthOfRec/2)
            .gesture( DragGesture().onChanged { value in locationX = value.location.x })
        
        
        
        
    }
}

Answer 1

Wenn ich Ihr Ziel richtig verstanden habe, müssen Sie es verwenden GestureState. Der Gestenstatus hat einen temporären Wert, der nach Beendigung der Geste auf den ursprünglichen Wert zurückgesetzt wird.

Hier ist eine Demo möglicher Lösungen. Vorbereitet mit Xcode 12.1 / iOS 14.1

struct ContentView: View {
    
    @State var locationX: CGFloat = .zero
    @GestureState private var translationX = CGFloat.zero

    let widthOfRec: CGFloat = 200
    
    var body: some View {

        Rectangle()
            .fill(Color.red)
            .frame(width: widthOfRec)
            .border(Color.black)
            .offset(x: locationX + translationX)
            .gesture(
                DragGesture().updating($translationX) { value, state, _ in
                    state = value.translation.width
                }.onEnded { value in
                    locationX += value.translation.width
                }
            )
    }
}