SwiftUIでいこう！ - Drag Gesture

参考サイトです

Working with SwiftUI Gestures and @GestureState | AppCodaWorking with SwiftUI Gestures and @GestureState

ドラッグできるようにします。

@GestureState private var dragOffset = CGSize.zero

@GestureState で変数を定義します。

"CGSize.zero"の使い方も記録しておきます。

【Swift】CGSizeの使い方

CGSize(width: 数値, height: 数値)

ということで設定できます。今回は"CGSize.zero"なので

CGSize(width: 0, height: 0)

ということです。

そしてこの変数の使い所、

.gesture(
          DragGesture()
            .updating($dragOffset, body: { (value, state, transaction) in
                 state = value.translation
             })
 )

.gestureの中でDragGesture()を使い、

.updating($dragOffset, body: { (value, state, transaction) in
state = value.translation
})

でドラッグできる状態となっています。ドラッグの終了と同時に元の位置"(0,0)"に戻ります。

これをドラッグして移動させて、その場所に留めたい時は、@Stateをつけた変数"position"を定義します。

@State private var position = CGSize.zero

これで、変数にその位置を覚えさせることで実現ができます。

次に、座標を保存するように命令を

 Image(systemName: "applelogo")

の中に入れます。

.offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)

そして、ドラッグするときの命令、DragGesture()の

.updating()

の後に

.onEnded()

を付け加えます。.onEnded()の中身は、

.onEnded({ (value) in
      self.position.height += value.translation.height
      self.position.width += value.translation.width
 })

ドラッグが終わった時点での座標をセットします。

コード全体です。

 struct ContentView: View {
   @GestureState private var dragOffset = CGSize.zero
   @State private var position = CGSize.zero

   var body: some View {
       Image(systemName: "star.circle.fill")
           .font(.system(size: 100))
           .offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)
           .animation(.easeInOut)
           .foregroundColor(.green)
           .gesture(
               DragGesture()
                   .updating($dragOffset, body: { (value, state, transaction) in

                       state = value.translation
                       
                       
                   })
                   .onEnded({ (value) in
                                      self.position.height += value.translation.height
                                      self.position.width += value.translation.width
                                  })
           )
   }
}