在开始写点按弹窗之前,我们需要简单了解什么是 SwiftUI。简单来说,任何你在手机上看到的程序界面都叫 UI,也就是交互界面。在手机应用中,软件开发者会使用不同的技术来实现界面的显示,流行的界面语言比如 Flutter,就是闲鱼应用的交互界面语言。而对于苹果的设备,比如 Apple Watch,Mac,iPhone 或是 iPad,苹果在 2019 年推出的官方 UI 编程语言则是 SwiftUI。SwiftUI 集众家之长,具有诸多优秀特性,可以预见它将会出现在诸多应用程序中。若你有兴趣,我会在其它文章中详解 SwiftUI,本文只着重讲其中弹窗的写法与逻辑。
你会怎样描述一个程序?
本文我将用如下图中的一个例子来展示如何设置点按弹窗。下图中程序的功能很简单:长按这句名言后,会出现点按弹窗,你可以点击复制按钮将这句话复制到系统剪贴板中。
试想你是一名美术,完全不了解程序。而你眼前只有一位盲人程序员,你想让他帮你实现这个程序,你会怎样告诉你的程序员你想要的效果?
也许你会这样和他说:
我这个程序上有一段名人名言,中英文版,上面一行是「天助自助者」,下面是「God helps those who help themselves」我希望它能被点按选中,选中的时候一定注意中英文两句话要一起被选中,而且上下左右请留出边距;对了,选中后要弹出一个选项,左边是复制,右边是一个复制的图标;啊,对了对了,英语字体最好是圆体字,而且两段文字都要加粗,就是小标题加粗的那种感觉。
那么为什么我要说这些呢?因为 SwiftUI 的设计思路正是描述性编程语言,你将上面这段话稍微整理一下,就是 SiwftUI 的写法。比如下面这段文字就是我整理好的 SwiftUI 代码:
SwiftUI 由两类代码组成,分别是 View 和 Modifier。如下图所示,这两类代码都可以在 Xcode 中直接拖出来用,你要做的只是玩拼图把它们拼在一起拼出你想要的功能。其中 View 表示一个视图,比如我们在手机上看到的一个滑条,一张图片,一个列表等种种,都叫做视图;而 Modifier 则是修饰器,它的作用是为视图增加功能,比如圆角,动画,阴影,边际,背景等等。下图就是它们在 Xcode 中的预设。
写 SwiftUI 得过程,实际上就是将一个个最基本的 View 像滚雪球一样越包越大的过程,你把一个个基础的视图和修改器用一个更大的视图包在一起,用修改器修改更大的视图,就能实现复杂的功能。现在我们来观察上述代码的结构,你会发现整段代码由一个名叫 VStack 的视图和众多 Modifier 组成。
那么 VStack 是什么呢?它的里面为什么会包着两个 Text 呢?其实 VStack 和 Text 本质上都被归为 View 这一类,VStack 的作用是将两段文字包在一起以便于被整体选中。而后面的全部代码都是这个 VStack 视图的修饰器,为其添加颜色,边距,以及点按弹窗功能。其中,上图的例子里的 View 又包含了两个更小的 Text View,每个 Text View 又被 .font 的字体修改器修改。
终于聊到了点按菜单的实现方式了,点按菜单是什么呢?它的实质就是一个 View,和其它任何 View 并无二致,因此我们需要在 contextMenu 里放一个 View 即可。而点按菜单,顾名思义,就是一个按钮,那么我们设置一个 Button View。在按钮中,我们需要设置两个点:按钮的动作,也就是 action,里面的两行代码会将名言文字复制到剪贴板;另一个点是下面的 HStack ,表示一个水平排列的 View。其左边是一个文字,右边是一个图标。