4

私は現在、ユーザーに自分の植物ボックスといくつかの測定値 (地面の湿度、温度など) を表示するアプリを開発しています。各植物ボックスには内部にいくつかの植物があり、詳細ビューに表示されています。ユーザーが植物の 1 つを隅にドラッグして削除できるようにしたいと考えています。現在、私はこの実装を持っています:

@GestureState private var dragOffset = CGSize.zero

var body: some View {

    //Plants Headline
    VStack (spacing: 5) {
        Text("Plants")
            .font(.headline)
            .fontWeight(.light)

        //HStack for Plants Images
        HStack (spacing: 10) {

            //For each that loops through all of the plants inside the plant box
            ForEach(plantBoxViewModel.plants) { plant in

                //Image of the individual plant (obtained via http request to the backend)
                Image(base64String: plant.picture)
                    .resizable()
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.white, lineWidth: 2))
                    .offset(x: self.dragOffset.width, y: self.dragOffset.height)
                    .animation(.easeInOut)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 70, height: 70)
                    .gesture(
                           DragGesture()
                            .updating(self.$dragOffset, body: { (value, state, transaction) in
                               state = value.translation
                           })
                   )
            }
        }
    }

}

次のようになります: コード スニペットのスクリーンショット

ただし、ドラッグを開始すると、両方の画像が移動します。両方の画像のオフセットが同じ変数 (DragOffset) にバインドされるためだと思います。1 つの画像だけが動くようにするにはどうすればよいですか?

植物のインデックスを特定のオフセットにマップするある種の配列を実装することを考えましたが、それをジェスチャに実装する方法がわかりません。助けてくれてありがとう!

4

2 に答える 2