SwiftUI 集合视图（Grid）拖放交换 Cell 的极简实现

在这里插入图片描述

概览

自从 SwiftUI 横空出世那天起，小伙伴们都感受到了它惊人的简单与便捷。而在本课中，我们将会用一个小“栗子”更直观的让大家体验到它无与伦比简洁的描述性特质：

在这里插入图片描述

如上图所示，我们在 SwiftUI 中实现了 Grid 中拖放交换 Cell 的功能，它是如何做到又快又好的呢？

在本篇博文中，您将学到如下内容：

概览
1. UIKit 中类似实现的思路
2. SwiftUI 的世界：超乎寻常的简单！
3. 设置导出类型标识符
4. 创建数据模型
5. 强大的 Drag&Drop 视图修改器
6. 调整拖放的视觉效果
总结

相信学完本课后，小伙伴们对 SwiftUI 中 Grid 视图以及拖放行为的内功修为都能够愈发精进！

那还等什么呢？Let‘s go！！！😉

1. UIKit 中类似实现的思路

在探索 SwiftUI 的解决方案之前，我们先来看看 UIKit 中完成类似实现要做些神马。

首先，SwiftUI 集合视图 Grid 在 UIKit 中的“对应物”是 UICollectionView。为了使 UICollectionView 履行拖放的责任和义务，我们需要让其视图控制器遵守 UICollectionViewDragDelegate 和 UICollectionViewDropDelegate 协议。

接着，选择实现上面两个协议中的若干方法。一般的，我们需要：

在拖动开始时获取源 Item：通过 collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) 方法来实现；
在拖动进行中实时更新目标 Item：通过 collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) 方法来实现；
在拖动完成后交换源和目标 Item：通过 collectionView(_ collectionView: UICollectionView, dragSessionDidEnd session: UIDragSession) 方法来实现；

最后，为了完成交换操作我们需要更改 UICollectionView 的数据源，并且亲自动手处理界面的更新。

在 UIKit 在 UICollectionView 中拖放交换 Cell 视图的极简实现这篇博文中，我们详细讨论了如何在 UIKit 的 UICollectionView 视图中实现 Cell 拖放交换，感兴趣的小伙伴们可以猛戳进一步观赏。

2. SwiftUI 的世界：超乎寻常的简单！

看到 UIKit 中这么“一大坨”实现概要，小伙伴们是否有点欲哭无泪的赶脚。

现在，欢迎大家来到 SwiftUI 的世界！

在 SwiftUI 中实现与 UIKit 中同样的功能，不能说轻而易举，也只能是毫不费力！

总的来说 SwiftUI 的简单性体现在如下几个方面：

由于 SwiftUI 描述性的特质，我们可以彻底丢弃故事板用简洁的代码去构建 Grid 自身布局和 Cell 的界面；
现成的 SwiftUI 原生拖放视图修改器，让简洁更进一步；
由状态驱动的数据源在改变时能够“变化自如”，各种动画效果应用起来更是得心应手；
可以非常方便的更改拖动中 Cell 的外观；

看到这里，小伙伴们是否有些怦然心动了呢？❤

心动不如行动，下面就且看我们如何用 SwiftUI 来简化 UIKit 中“笨拙”的实现！

3. 设置导出类型标识符

首先，新建一个 SwiftUI 项目，进入 Xcode 项目中 TARGET 的 info 选项窗口，展开底部的 Exported Type Identifiers 面板，在其中新建一个 Identifier 为 com.hopy.panda.com.ITEM 的导出类型：

在这里插入图片描述

大家可以自由选择上面 Identifier 对应的字符串标识，并没有特定要求。

在这里，新建一个导出类型的目的是防止 App 在运行时出现所需类型未导出的警告。

实际上，如果只是要实现单个 App 中的拖放，也可以对此“不闻不问”。

4. 创建数据模型

接着，我们创建 Item 数据模型：

import UniformTypeIdentifiersextension UTType {static var item: UTType = .init(exportedAs: "com.hopy.panda.com.ITEM")
}struct Item: Identifiable, Hashable, Transferable, Codable{var id = UUID()var title: Stringstatic var transferRepresentation: some TransferRepresentation {CodableRepresentation(contentType: .item)}static var preview: [Item] = {[Item(title: "Apple"), Item(title: "Banana"),Item(title: "Cherry"), Item(title: "Date"),Item(title: "Dragon"), Item(title: "Sheep"),Item(title: "V-Malicious"), Item(title: "X-Code"),Item(title: "GreatWall"), Item(title: "TaiTan"),Item(title: "Milk"), Item(title: "🥸"),]}()
}

在上面的代码中，我们做了这样几件事：

导入 UniformTypeIdentifiers 框架；
为我们的 Item 扩展 UTType 类型；
让 Item 类型遵守 Transferable 和 Codable 协议；

5. 强大的 Drag&Drop 视图修改器

在数据模型就绪之后，我们可以来打造 App 界面了。

首先是最简单的 Item 导航目标视图 DetailView：

struct DetailView: View {let item: Itemvar body: some View {Text(item.title).font(.system(size: 55, weight: .bold, design: .rounded))}
}

然后，是我们期待已久的主视图 ContentView：

struct ContentView: View {@State var items = Item.previewprivate let cols = [GridItem(.flexible()), GridItem(.flexible())]@ViewBuilder func itemView(item: Item) -> some View {ZStack {Rectangle().frame(width: 170, height: 170).foregroundStyle(.pink.gradient)Text(item.title).font(.title2.weight(.bold)).foregroundStyle(.white)}.clipShape(RoundedRectangle(cornerRadius: 11))}var body: some View {NavigationStack {ScrollView(showsIndicators: false) {LazyVGrid(columns: cols) {ForEach(items) { item inNavigationLink(value: item) {itemView(item: item)}}}}.padding(.horizontal).edgesIgnoringSafeArea(.bottom)}}
}

运行效果如下图所示：

在这里插入图片描述

接着，我们来实现核心拖放功能。所幸的是，SwiftUI 早已为我们打点好了一切！

在 SwiftUI 中，对于拖动功能我们有 draggable(_:preview:) 修改器方法：

在这里插入图片描述

而对于放置功能，同样有 dropDestination(for:action:isTargeted:) 修改器为我们排忧解难：

在这里插入图片描述

有了上述两者的合璧，我们即可“利剑出鞘，无坚不摧”！

下面，我们先为 ContentView 中添加拖放交互所需的状态：

@State var draggingItem: Item?
@State var draggingOverItem: Item?

现在，在 Grid 中的每个 Cell 上附着我们的拖放视图修改器：

itemView(item: item).draggable(item) {itemView(item: item).onAppear {draggingItem = item}}.dropDestination(for: Item.self, action: { _, _ inguard let srcItem = draggingItem, let destItem = draggingOverItem else { return false }let srcIdx = items.firstIndex(of: srcItem)!let destIdx = items.firstIndex(of: destItem)!withAnimation(.snappy) {items.swapAt(srcIdx, destIdx)}draggingItem = nildraggingOverItem = nilreturn true}, isTargeted: { entered inguard entered, item != draggingItem else { return }draggingOverItem = item})

上面代码的功能很简单：我们在拖动那一刹那获取源 Item，在拖动中即时更新目标 Item，最后在拖动结束时交换它们。

在这里插入图片描述

My God！怎能如此简单，竟引无数秃头码农门竞折腰、齐掉发！

注意，目前拖放功能在 Xcode （15.2）预览中执行起来有 Bug，大家可以在模拟器或真机中测试上述代码。

6. 调整拖放的视觉效果

虽然我们已经实现了博文开头的预定目标，不过我们还可以百尺竿头更进一步。

利用 SwiftUI 的简洁性，我们希望当用户拖动 Item 时应该体现出有所不同的视觉效果：Grid 中对应的 Cell 能够略微缩小、变淡；

我们照例还是先在 ContentView 中增加一个用来表示当前拖动是否包含对应目标 Item 的 wasEntered 状态，并新建一个 needApplyDragingEffect() 方法来检查是否要添加额外的视觉效果：

@State var wasEntered = falseprivate func needApplyDragingEffect(_ item: Item) -> Bool {draggingOverItem == item && wasEntered
}

接着，我们将 ContentView 中的 body 代码修改为如下形式：

var body: some View {NavigationStack {ScrollView(showsIndicators: false) {LazyVGrid(columns: cols) {ForEach(items) { item inNavigationLink(value: item) {itemView(item: item).opacity(needApplyDragingEffect(item) ? 0.5 : 1.0).scaleEffect(x: needApplyDragingEffect(item) ? 0.9 : 1.0, y: needApplyDragingEffect(item) ? 0.9 : 1.0).draggable(item) {...}.dropDestination(for: Item.self, action: { _, _ inguard let srcItem = draggingItem, let destItem = draggingOverItem else { return false }let srcIdx = items.firstIndex(of: srcItem)!let destIdx = items.firstIndex(of: destItem)!withAnimation(.snappy) {items.swapAt(srcIdx, destIdx)}draggingItem = nildraggingOverItem = nilwasEntered = falsereturn true}, isTargeted: { entered inwithAnimation(.bouncy) {wasEntered = entereddraggingOverItem = item}})}}}}}
}