SwiftUI - 拖放

SwiftUI 提供了一项称为拖放的特殊功能。拖放允许用户将任何项目或内容从应用程序的一个部分或位置移动到应用程序的另一个部分或位置。或者，我们可以将内容从一个应用程序拖放到另一个应用程序。它可以拖放视图中给出的数据、图像、文本或其他内容。

它在图像库、文件管理器、笔记等应用程序中很有用。此功能在 iOS、iPadOS 和 macOS 中可用。除了内容之外，我们还可以通过拖放来移动、重新排列、重新排序或传输来自应用程序不同部分的对象(例如 UI 元素或 UIView)。

使用可转移项目进行拖放

在 SwiftUI 中，我们可以借助 Transferable 协议拖放项目。这是在给定视图之间移动元素的最简单的协议。它提供了两个修饰符:.draggable() 和 .dropDestination，用于将元素从一个视图拖放到另一个视图。

.draggable() 修饰符

.draggable() 修饰符允许我们在指定视图中执行拖放操作。此修饰符符合 Transferable 协议。它允许用户使用手势拖动视图，并且它将自动在内部执行拖动。我们还可以将此修饰符与 DragGesture() 结合使用，以在拖动时更好地控制视图。

语法

以下是语法 −

.draggable(_payload: @autoclosure)

参数

它只接受一个参数，即有效负载。它是一个闭包，表示来自视图的可拖动数据。

.dropDestination() 修饰符

.dropDestination() 修饰符指定放置内容的目标。或者我们可以说它允许我们在视图层次结构中指定可以放置可拖动项目的位置。

语法

以下是语法 −

.dropDestination(
   for payloadType: Type,
   action: @escapingClosure,
   isTargeted: @escapingClosure
)

参数

• for: 表示我们要放置的视图。

• action: 表示一个闭包，它接受放置的元素并做出相应响应。如果拖动操作成功，它将返回 true，否则将返回 false。

• isTargeted:表示当拖放操作进入目标位置时调用的闭包。如果光标在指定区域，它将返回 true，否则返回 false。

示例

以下 SwiftUI 程序用于使用 Transferable Items 执行拖放。

import SwiftUI

struct ContentView: View {
   @State private var language: [String] = ["Java", "C++", "Python", "Go"]
   @State private var dropIcon = Image(systemName: "square.and.arrow.down")

   var body: some View {
      VStack {
         HStack {
            ForEach(language, id: \.self) { x in
               Text(x)
                  .frame(minWidth: 50, minHeight: 50)
                  .background(.white)
                  .foregroundStyle(.pink)
                  .cornerRadius(10)
                  .draggable(x)
            }
         }
         .frame(minWidth: 250, minHeight: 70)
         .cornerRadius(10)

         Text("Drop favorite language here:")

         dropIcon
            .frame(width: 200, height: 150)
            .background(.yellow.opacity(0.4))
            .foregroundStyle(.white)
            .dropDestination(for: Image.self) { 
               x, loc in
               dropIcon = x.first ?? Image(systemName: "square.and.arrow.down")
               print(loc)
               return true
            }
      }
   }
}
#Preview {
   ContentView()
}

输出