为拖放添加触觉（draggable、dropDestination）

Question

如何在拖放操作中添加触觉效果？ 我遵循本教程：https://www.youtube.com/watch?v=UFiOCcm6zTo 但我不知道当我们选择一个视图并将其删除时如何添加触觉。

谢谢

LazyVGrid(columns: columns, spacing: 10, content: {
    ForEach(cards) { card in
        
        CardView(numberOfColumns: CGFloat(numberOfColumns), is2ColumnsSelected: is2ColumnsSelected, size: size, card: card)
            .draggable(card) {
                CardView(numberOfColumns: CGFloat(numberOfColumns), is2ColumnsSelected: is2ColumnsSelected, size: size, card: card)
                    .frame(width: size.width/CGFloat(numberOfColumns) - 20)
                    .onAppear {
                        draggingCard = card
                    }
            }
            .dropDestination(for: Card.self) { items, location in
                draggingCard = nil
                return false
            } isTargeted: { status in
                if let draggingCard, status, draggingCard != card {
                    if let sourceIndex = cards.firstIndex(of: draggingCard), let destinationIndex = cards.firstIndex(of: card) {
                        withAnimation(.bouncy) {
                            let sourceCard = cards.remove(at: sourceIndex)
                            cards.insert(sourceCard, at: destinationIndex)
                        }
                    }
                }
            }
    }
}
    

我尝试在可拖动修改器和 dropDestination 修改器中添加触觉

CardView(numberOfColumns: CGFloat(numberOfColumns), is2ColumnsSelected: is2ColumnsSelected, size: size, card: card)
    .draggable(card) {
        UIImpactFeedbackGenerator(style: .medium).impactOccurred()
        CardView(numberOfColumns: CGFloat(numberOfColumns), is2ColumnsSelected: is2ColumnsSelected, size: size, card: card)
            .frame(width: size.width / CGFloat(numberOfColumns) - 20)
            .onAppear {
                draggingCard = card
            }
    }
    .dropDestination(for: Card.self) { _, _ in
        draggingCard = nil
        return false
    } isTargeted: { status in
        if let draggingCard, status, draggingCard != card {
            if let sourceIndex = cards.firstIndex(of: draggingCard), let destinationIndex = cards.firstIndex(of: card) {
                withAnimation(.bouncy) {
                    let sourceCard = cards.remove(at: sourceIndex)
                    cards.insert(sourceCard, at: destinationIndex)
                }
            }
        }
    }

Answer 1

使用

sensoryFeedback(trigger:_:)

修改器添加触觉。由于您使用

draggingCard

来记录您正在拖动哪张卡片，因此您也可以将其用作

trigger

来获得感官反馈：

// you can add this to the LazyVGrid
.sensoryFeedback(trigger: draggingCard) { _, card in
    // this closure is called whenever draggingCard changes
    // return a SensoryFeedback
    if card != nil { // dragging has started
        return .start
    } else { // the view has been dropped
        return .stop
    }
}

这是一个只有两个矩形的玩具示例 - 一个是可拖动的，另一个用作放置目的地。

struct ContentView: View {
    @State var dragging = false
    
    var body: some View {
        HStack {
            Rectangle().fill(.red)
                .draggable("some payload") {
                    Rectangle().fill(.red)
                        .onAppear {
                            dragging = true
                        }
                }
            Rectangle().fill(.green)
                .dropDestination(for: String.self) { items, location in
                    dragging = false
                    return true
                } isTargeted: { _ in
                    
                }

        }
        .sensoryFeedback(trigger: dragging) { oldValue, newValue in
            print(newValue)
            if newValue {
                return .start
            } else {
                return .stop
            }
        }
    }
}