Comment puis-je mettre à jour l'emplacement X pour le décalage dans le point de prise exact pour une vue dans SwiftUI?

Question

J'essaie de mettre à jour mon décalage Rec avec le geste de glissement de ce Rec, j'ai déjà codé de cette manière que le Rec commence à se déplacer en fonction du glissement et de suivre le glissement pendant que j'ai codé, le problème que j'ai avec ceci est qu'il se centré toujours et je ne peux pas faire glisser Rec hors de l'écran, mon objectif est de coder de manière à ce que le décalage commence à fonctionner avec l'emplacement de la balise et qu'il devienne la source du décalage, maintenant la source est au centre, ce que j'aime être dynamique et flexible en tant que appuyez sur Rec. Comment dois-je coder cela?

    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

Si j'ai bien compris votre objectif, vous devez utiliser GestureState. L'état du geste a une valeur temporaire qui revient à l'état initial une fois le geste terminé.

Voici une démonstration de solution possible. Préparé avec 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
                }
            )
    }
}