SwiftUI 拖动手势适用于父视图答案

【问题标题】：SwiftUI Drag gesture applies to parent viewSwiftUI 拖动手势适用于父视图
【发布时间】：2021-03-10 20:20:56
【问题描述】：

我已经对 Foreach 视图内的 Image 视图应用了带有一些操作的拖动手势，但是当我拖动图像时 - 它在视觉上拖动父视图中的所有图像，甚至在另一个带有图像的 Foreach 视图中。但是，应用于所选图像的操作可以正常工作。我怎样才能让选定的图像移动而所有其他图像保持静止？

手势变量：

@State var position = CGSize.zero
@GestureState private var dragOffset = CGSize.zero

有代码：

ScrollView(.horizontal) {
                HStack(alignment: .center, spacing: 0) {
                    ForEach ((0..<player.playersCards.count), id: \.self) {number in
                        VStack {
                            Image(player.playersCards[number].pic)
                                .resizable()
                                .modifier(CardStyle())
                                .offset(dragOffset)
                                .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

                                            //player's turn
                                            
                                        })
                                )
                                .animation(.spring())

                            Text("\(ai.getPower(card: player.playersCards[number]))")
                                .modifier(TextModifier())
                        }
                    }
                }
            }

【问题讨论】：

标签： swift swiftui gesture drag

【解决方案1】：

这是因为 forEach 中的所有图像都设置为单个 @GestureState 属性，所以当一个被拖动时，所有映射到它都会在 body 刷新时被拖动.您可以拥有单独的array，将卡片的每个拖动状态唯一地存储在特定索引处。

struct LanguageView: View {


    @State var position = CGSize.zero
    @GestureState private var dragOffset:[CGSize]

    init() {
        let  dragOffsets = [CGSize](repeating: CGSize.zero, count: 5) // Initialise with your model array count
        _dragOffset = GestureState(wrappedValue: dragOffsets)
    }

    var body: some View {
        ScrollView(.horizontal) {
            HStack(alignment: .center, spacing: 5) {
                ForEach ((0..<5)) {number in
                    VStack {
                        Image("ABC")
                            .resizable()
                            .frame(width: 300, height: 100)
                            //.modifier(CardStyle())
                            .offset(dragOffset[number])
                            .gesture(
                                DragGesture()
                                    .updating($dragOffset, body: { (new, existing, transaction) in

                                        existing[number] = new.translation
                                    })
                                    .onEnded({ (value) in
                                        self.position.height += value.translation.height
                                        self.position.width += value.translation.width

                                        //player's turn

                                    })
                            )
                            .animation(.spring())

                        Text("Foo")
                        // .modifier(TextModifier())
                    }
                }
            }
        }.frame(width: 500, height: 100)
    }
}

【讨论】：

非常感谢您的帮助。我现在唯一遇到的问题是卡片在包含卡片的 HStack 区域内移动并且没有越过该区域。您能否提供一个想法，如何让它在整个屏幕或比父视图更大的区域上视觉移动？

【解决方案2】：

您必须为 playersCards 定义 number，就像您为此定义 pic 一样，它必须从 0 开始到您的最后一张卡，然后使用这个向下拖动的代码

ScrollView(.horizontal) {
                HStack(alignment: .center, spacing: 0) {
                    ForEach ((0..<player.playersCards.count), id: \.self) {number in
                        VStack {
                            Image(player.playersCards[number].pic)
                                .resizable()
                                .modifier(CardStyle())
                                .offset(dragOffset)
                                .gesture(
                                    DragGesture()
                                        .updating($dragOffset, body: { (value, state, transaction) in
    
                                            if player.playersCards[number].number == number {     // <<: Here
                                                state = value.translation
                                            }
                                           
                                        })
                                        .onEnded({ (value) in
                                            
                                            if player.playersCards[number].number == number {    // <<: Here
                                                
                                                self.position.height += value.translation.height
                                                self.position.width += value.translation.width
                                                
                                            }
                                            
       
    
                                            //player's turn
                                            
                                        })
                                )
                                .animation(.spring())
    
                            Text("\(ai.getPower(card: player.playersCards[number]))")
                                .modifier(TextModifier())
                        }
                    }
                }
            }

【讨论】：