如何结合动画使用SwiftUI的.onDrop(_: delegate:)视图修饰符？

我们有一个SwiftUI视图，使用.onDrop(of:isTargeted:perform:)修饰符时，能通过$isDraggingActive.animation(...)让拖拽进入/离开时的状态变化平滑动画：

struct Blah: View
{
    @State private var isDraggingActive: Bool

    var body: some View
    {
       // 视图内容
    }
    .onDrop(of: [.fileURL], isTargeted: $isDraggingActive.animation(.easeInOut(duration: 0.15)), perform: { providers in
            // 处理拖拽内容
        })
}

但当需要完全控制拖拽验证，改用delegate形式的.onDrop(of:delegate:)时，不知道怎么给isDraggingActive的状态更新加上同样的动画效果：

struct Blah: View
{
    var dragDelegate = MyDragDelegate()
    @State private var isDraggingActive: Bool

    var body: some View
    {
       // 视图内容
    }
    .onDrop(of: [.fileURL], delegate: dragDelegate)   // 如何在此处为isDraggingActive状态添加动画更新？
}

要实现这个需求，核心是让拖拽代理能访问并通过动画更新视图的isDraggingActive状态，具体步骤如下：

1. 修改拖拽代理，添加状态绑定
   让MyDragDelegate持有@Binding类型的isDraggingActive，实现和视图@State状态的双向绑定：

   class MyDragDelegate: DropDelegate {
       @Binding var isDraggingActive: Bool
       let animation: Animation = .easeInOut(duration: 0.15)
   
       // 初始化时传入状态绑定
       init(isDraggingActive: Binding<Bool>) {
           _isDraggingActive = isDraggingActive
       }
   
       // 拖拽进入目标区域时，用动画更新状态
       func dropEntered(info: DropInfo) {
           withAnimation(animation) {
               isDraggingActive = true
           }
       }
   
       // 拖拽离开目标区域时，用动画重置状态
       func dropExited(info: DropInfo) {
           withAnimation(animation) {
               isDraggingActive = false
           }
       }
   
       // 处理拖拽完成逻辑，结束后重置状态
       func performDrop(info: DropInfo) -> Bool {
           // 这里添加处理拖拽内容的代码
           
           withAnimation(animation) {
               isDraggingActive = false
           }
           return true
       }
   
       // 按需实现其他拖拽验证方法，如validateDrop等
   }
   

2. 在视图中初始化代理并传入状态绑定
   不再创建无参数的代理实例，而是通过视图的$isDraggingActive绑定初始化代理：

   struct Blah: View {
       @State private var isDraggingActive: Bool = false
   
       // 用状态绑定初始化拖拽代理
       private var dragDelegate: MyDragDelegate {
           MyDragDelegate(isDraggingActive: $isDraggingActive)
       }
   
       var body: some View {
           // 示例视图：根据isDraggingActive切换背景样式
           Text("拖拽文件到这里")
               .padding()
               .background(isDraggingActive ? Color.blue.opacity(0.3) : Color.gray.opacity(0.1))
               .cornerRadius(8)
       }
       .onDrop(of: [.fileURL], delegate: dragDelegate)
   }
   

关键说明 #

• withAnimation会将状态更新包裹在指定动画中，效果和原来的$isDraggingActive.animation(...)完全一致；
• DropDelegate协议要求代理是引用类型（class），所以必须用class定义代理；
• 在performDrop结束后手动重置isDraggingActive，确保拖拽完成后状态能正确恢复。

内容的提问来源于stack exchange，提问作者Bryan