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.mzph.cn/news/696882.shtml

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

相关文章

基于SpringBoot + Layui的社区物业管理系统

项目介绍 社区物业管理系统是基于java编程语言,springboot框架,idea工具,mysql数据库进行开发,本系统分为业主和管理员两个角色,业主可以登陆系统,查看车位费用信息,查看物业费用信息&#xff0…

2个wordpress优化SEO主题模板

SEO优化wordpress主题 简洁的SEO优化wordpress主题,效果好不好,结果会告诉你,适合SEO公司使用的主题。 https://www.jianzhanpress.com/?p2804 SEO优化海外WordPress主题 简洁的SEO优化海外服务商WordPress主题,为中国制造202…

HTTP REST 方式调用WebService接口(wsdl)

一、WebService接口正常使用SOAP协议调用,测试时常采用SoapUI软件调用,具体如下: 二、由于目前主流web服务逐渐转换为RESTful的形式,且SOAP协议的实现也是基于HTTP协议,故存在通过HTTP调用WebService接口的可能 2.1 …

Flink双流(join)

一、介绍 Join大体分类只有两种:Window Join和Interval Join Window Join有可以根据Window的类型细分出3种:Tumbling(滚动) Window Join、Sliding(滑动) Window Join、Session(会话) Widnow Join。 🌸Window 类型的join都是利用window的机制…

【OpenFeign常用配置】

OpenFeign常用配置 快速入门:1、引入依赖2、启用OpenFeign 实践1、引入依赖2、开启连接池功能3、模块划分4、日志5、重试 快速入门: OpenFeign是一个声明式的http客户端,是spring cloud在eureka公司开源的feign基础上改造而来。其作用及时基于…

C++ template-2

第 5 章 基础技巧 5.1 typename 关键字 关键字typename在C标准化过程中被引入进来&#xff0c;用来澄清模板内部的一个标识符代表的 是某种类型&#xff0c;而不是数据成员。考虑下面这个例子&#xff1a; template<typename T> class MyClass { public:void foo() {t…

Nginx -2

接着上文写 5.4.7 验证模块 需要输入用户名和密码 模块名称&#xff1a;ngx_http_auth_basic_module 访问控制基于模块 ngx_http_auth_basic_module 实现&#xff0c;可以通过匹配客户端资源进行限制 语法&#xff1a; Syntax: auth_basic string | off; Default: auth_ba…

威尔金森功分器基本原理学习笔记

威尔金森功分器基本原理 威尔金森功率分配器的功能是将输入信号等分或不等分的分配到各个输出端口&#xff0c;并保持相同输出相位。环形器虽然有类似功能&#xff0c;但威尔金森功率分配器在应用上具有更宽的带宽。微带形功分器的电路结构如图所示&#xff0c;其中&#xff0…

Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作

Vue图片浏览组件v-viewer&#xff0c;支持旋转、缩放、翻转等操作 之前用过viewer.js&#xff0c;算是市场上用过最全面的图片预览。v-viewer&#xff0c;是基于viewer.js的一个图片浏览的Vue组件&#xff0c;支持旋转、缩放、翻转等操作。 基本使用 安装&#xff1a;npm安装…

费舍尔FISHER金属探测器探测仪维修F70

美国FISHER LABS费舍尔地下金属探测器&#xff0c;金属探测仪等维修&#xff08;考古探金银铜探宝等仪器&#xff09;。 费舍尔F70视听目标ID金属探测器&#xff0c;Fisher 金属探测器公司成立于1931年&#xff0c;在实验条件很艰苦的情况下&#xff0c;研发出了地下金属探测器…

【Python】实现一个类似于Glass2k的Windows窗口透明化软件

一 背景说明 网上看到一款Windows下的窗口透明化工具Glass2k&#xff08;Glass2k官网&#xff09;&#xff0c;可以简单地通过快捷键实现任意窗口的透明化&#xff0c;还挺方便的&#xff0c;想用Python自己实现一下类似的功能。 软件已经开源到&#xff1a;窗口透明化小工具开…

【Leetcode】889. 根据前序和后序遍历构造二叉树

文章目录 题目思路代码结果 题目 题目链接 给定两个整数数组&#xff0c;preorder 和 postorder &#xff0c;其中 preorder 是一个具有 无重复 值的二叉树的前序遍历&#xff0c;postorder 是同一棵树的后序遍历&#xff0c;重构并返回二叉树。 如果存在多个答案&#xff0c;…

CSS基础属性

【三】基础属性 【1】高度和宽度 &#xff08;1&#xff09;参数 width&#xff08;宽度&#xff09;&#xff1a;用于设置元素的宽度。可以使用具体的数值&#xff08;如像素值&#xff09;或百分比来指定宽度。 height&#xff08;高度&#xff09;&#xff1a;用于设置元…

Kubernetes 卷存储 NFS | nfs搭建配置 原理介绍 nfs作为存储卷使用

目录 1、NFS介绍2、NFS服务部署2.1安装nfs服务 (服务端配置)2.2启动NFS服务2.3 服务检查2.4 客户端配置 3、nfs作为存储卷使用3.1 nfs作为volume3.2 nfs存储的缺点3.3 nfs作为PersistentVolum 4、nfs作为动态存储提供5、总结 1、NFS介绍 NFS&#xff08;Network File System&a…

4.pom文件介绍Maven常用命令

1.pom.xml文件介绍. 1.1project标签和modelVersion标签介绍. pom.xml文件是maven的核心文件&#xff0c;POM(Project Object Model&#xff0c;项目对象模型)定义了项目的基本信息&#xff0c;用于描述如何构建&#xff0c;声明项目依赖;&#xff1b; 1.2依赖坐标介绍. 依赖的…

得物面试:Kafka消息0丢失,如何实现?

得物面试&#xff1a;Kafka消息0丢失&#xff0c;如何实现&#xff1f; 尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面…

新版Java面试专题视频教程——多线程篇②

新版Java面试专题视频教程——多线程篇② 0. 问题汇总0.1 线程的基础知识0.2 线程中并发安全0.3 线程池0.4 使用场景 1.线程的基础知识2.线程中并发锁3.线程池3.1 说一下线程池的核心参数&#xff08;线程池的执行原理知道嘛&#xff09;3.2 线程池中有哪些常见的阻塞队列Array…

虚拟机的内存结构

一、摘要 熟悉 Java 语言特性的同学都知道&#xff0c;相比 C、C 等编程语言&#xff0c;Java 无需通过手动方式回收内存&#xff0c;内存中所有的对象都可以交给 Java 虚拟机来帮助自动回收&#xff1b;而像 C、C 等编程语言&#xff0c;需要开发者通过代码手动释放内存资源&…

MedicalGPT 训练医疗大模型,实现了包括增量预训练、有监督微调、RLHF(奖励建模、强化学习训练)和DPO(直接偏好优化)

MedicalGPT 训练医疗大模型&#xff0c;实现了包括增量预训练、有监督微调、RLHF(奖励建模、强化学习训练)和DPO(直接偏好优化)。 MedicalGPT: Training Your Own Medical GPT Model with ChatGPT Training Pipeline. 训练医疗大模型&#xff0c;实现了包括增量预训练、有监督微…

Linux第63步_为新创建的虚拟机添加必要的目录和安装支持linux系统移植的软件

1、创建必要的目录 1)、创建“/home/zgq/linux/”目录 打开终端&#xff0c;进入“/home/zgq/”目录 输入“mkdir linux回车”&#xff0c;创建“/home/zgq/linux/”目录 输入“ls回车”&#xff0c;列举“/home/zgq/”目录的所有文件和文件夹 创建好“/home/zgq/linux/”…