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 的简单性体现在如下几个方面：

  1. 由于 SwiftUI 描述性的特质，我们可以彻底丢弃故事板用简洁的代码去构建 Grid 自身布局和 Cell 的界面；
  2. 现成的 SwiftUI 原生拖放视图修改器，让简洁更进一步；
  3. 由状态驱动的数据源在改变时能够“变化自如”，各种动画效果应用起来更是得心应手；
  4. 可以非常方便的更改拖动中 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: "🥸"),]}()
}

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

  1. 导入 UniformTypeIdentifiers 框架；
  2. 为我们的 Item 扩展 UTType 类型；
  3. 让 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}})}}}}}
}

在上面代码中，当拖动着的视图凌驾于任意 Cell 的上空时，我们为对应的 Cell 添加了视觉特效：

在这里插入图片描述

至此，我们用 SwiftUI 简洁的代码逻辑完成了 UIKit 中相同的功能，我们还更进一步为拖放添加了些许取悦用户的视觉效果，棒棒哒！💯

总结

在本篇博文中，我们讨论了在 SwiftUI 中如何为集合视图（Grid）添加拖放交换其 Cell 的功能，小伙伴们可以从代码中真正体会到 SwiftUI 的简洁之美！

感谢观赏，再会！😎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/484937.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IIC通信驱动EEPROM，AT24C02硬件存储器编程（2）

IIC通信驱动EEPROM，AT24C02硬件存储器编程（2）

接着上一篇博客文章讲解了IIC协议的原理及编程思路，本篇博客文章将以IIC为基础，从芯片手册入手，梳理讲解如何对AT24C02进行驱动编程，实现数据的读写操作。IIC通信驱动硬件编程 (1)-CSDN博客https://blog.csdn.net/weixin_49337111…
阅读更多...
06 内存管理

06 内存管理

目录 c/c内存分布c语言中动态内存管理方式c中动态内存管理方式operator new与operator delete函数new和delete的实现原理定位new表达式(placement-new)常见题 1. c/c内存分布 看一段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticV…
阅读更多...
FSQ: FINITE SCALAR QUANTIZATION: VQ-VAE MADE SIMPLE

FSQ: FINITE SCALAR QUANTIZATION: VQ-VAE MADE SIMPLE

Paper name FINITE SCALAR QUANTIZATION: VQ-VAE MADE SIMPLE Paper Reading Note Paper URL: https://arxiv.org/abs/2309.15505 Code URL: (官方 jax 实现) https://github.com/google-research/google-research/tree/master/fsq(pytorch 实现) https://github.com/luci…
阅读更多...
教你用Appium搭建Android自动化测试框架（详细教程）

教你用Appium搭建Android自动化测试框架（详细教程）

如题，本文附有仓库地址以及代码，目录如下： 1.下载安装appium 2.配置并使用appium 3.配置工程 一、下载安装appium 下载appium-desktop的mac版本，我选择用1.17.1版本，最新的版本1.22.0，拆分一个桌面应用…
阅读更多...
2.22作业

2.22作业

作业要求&#xff1a; 程序代码&#xff1a; #include<myhead.h>int num 520; pthread_mutex_t mutex;void* task1(void* arg) {pthread_mutex_lock(&mutex);num 1314;sleep(3);printf("task1:num %d\n", num);pthread_mutex_unlock(&mutex); }voi…
阅读更多...
医药之链：基于Django的智能药品管理系统

医药之链：基于Django的智能药品管理系统

框架 Python 3.7 django 3.2.13 Bootstrap&#xff08;前端&#xff09; sqlite&#xff08;数据库&#xff09;导包 pip install django3.2.13 pip install pandas pip install xlwt环境搭建 登录 zfx 123456
阅读更多...
iOS 不用VOIP也可以实现微信来电邀请推送持续响铃震动及及时来电取消

iOS 不用VOIP也可以实现微信来电邀请推送持续响铃震动及及时来电取消

iOS 不用VOIP也可以实现微信来电邀请推送持续响铃震动及及时来电取消 前言一 、关于NotificationServiceExtension1. 创建2. 推送机制3. API 实例方法二、 APNS Push Payload2. 来电邀请2. 来电取消三、数据共享3. 配置共享域四 知识点就到这里，下面是主要代码4. 1 Notificati…
阅读更多...
C++ 八数码问题理解 `IDA*` 算法原则：及时止损，缘尽即散

C++ 八数码问题理解 `IDA*` 算法原则：及时止损，缘尽即散

1.前言 八数码是典型的状态搜索案例。如字符串转换问题、密码锁问题都是状态搜索问题。 状态搜索问题指由一种状态转换到到最终状态&#xff0c;求解中间需要经过多少步转换&#xff0c;或者说最小需要转换多少步&#xff0c;或者说有多少种转换方案。本文和大家聊聊八数码问…
阅读更多...
如何在Shopify 创建Mega Menu

如何在Shopify 创建Mega Menu

在Shopify上创建Mega Menu可以通过以下步骤完成&#xff1a; 1. 选择适合的主题 首先&#xff0c;选择一个适合的主题&#xff0c;因为不是所有的Shopify主题都支持Mega Menu。确保选择一个具有自定义菜单功能的主题&#xff0c;或者您可以使用Shopify App Store中的应用程序来…
阅读更多...
（十三）【Jmeter】线程（Threads(Users)）之tearDown 线程组

（十三）【Jmeter】线程（Threads(Users)）之tearDown 线程组

简述 操作路径如下： 作用：在正式测试结束后执行清理操作，如关闭连接、释放资源等。配置：设置清理操作的采样器、执行顺序等参数。使用场景：确保在测试结束后应用程序恢复到正常状态，避免资源泄漏或对其他测试的影响。优点：提供清理操作，确保测试环境的整洁和可重复性…
阅读更多...
mysql索引问题

mysql索引问题

今天在工作写项目的时候&#xff0c;突然发现很多地方没有加索引&#xff0c;然后我就去加了&#xff0c;查了不少资料&#xff0c;捡起来了不少东西&#xff0c;来简单聊一聊&#xff0c;工作中最重要的一个细节&#xff1a;索引 mysq的存储结构 首先要聊一聊mysql的存储模式…
阅读更多...
Docker镜像和容器

Docker镜像和容器

1.Docker的架构和底层技术 Docker提供了一个开发、打包、运行APP&#xff08;应用application&#xff09;的平台把APP和底层infrastructure&#xff08;基础设备&#xff09;隔离开来 ApplicationDocker EngineInfrastructure(physical/virtual) 1.1Docker Engine组成 后台…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023