面向所有人的 UI 编程 ：透过点按弹窗初尝 SwiftUI

本文是 SwiftUI 开发教程中的一篇，我们将一起探究上述问题的答案。若你有兴趣学习 iOS 应用程序开发，又或者是想了解 iOS 程序是如何运行的，欢迎关注这一系列文章。我会频繁更新关于 iOS 程序开发的各种知识点和技巧。本系列全部文章少数派的王禹效账户下免费分享，源码购买见文末。

什么是点按弹窗？

在更新 iOS 13 或者 iPadOS 13 后，你会发现长按许多软件图标都会出现如下弹窗，比如设置内的快捷选项允许你快速更改电池设置等等。点按弹窗的体验并没有止步于此，使用过新系统一段时间后，你会发现这个点按弹窗渗透到了系统应用的方方面面。事实上，苹果在今年 WWDC 19 开发者大会中，推荐开发者将应用内弹窗安置在应用程序的方方面面，以保证 iOS 用户体验的一致性。

 

在开始写点按弹窗之前，我们需要简单了解什么是 SwiftUI。简单来说，任何你在手机上看到的程序界面都叫 UI，也就是交互界面。在手机应用中，软件开发者会使用不同的技术来实现界面的显示，流行的界面语言比如 Flutter，就是闲鱼应用的交互界面语言。而对于苹果的设备，比如 Apple Watch，Mac，iPhone 或是 iPad，苹果在 2019 年推出的官方 UI 编程语言则是 SwiftUI。SwiftUI 集众家之长，具有诸多优秀特性，可以预见它将会出现在诸多应用程序中。若你有兴趣，我会在其它文章中详解 SwiftUI，本文只着重讲其中弹窗的写法与逻辑。

你会怎样描述一个程序？

本文我将用如下图中的一个例子来展示如何设置点按弹窗。下图中程序的功能很简单：长按这句名言后，会出现点按弹窗，你可以点击复制按钮将这句话复制到系统剪贴板中。

试想你是一名美术，完全不了解程序。而你眼前只有一位盲人程序员，你想让他帮你实现这个程序，你会怎样告诉你的程序员你想要的效果？

也许你会这样和他说：

我这个程序上有一段名人名言，中英文版，上面一行是「天助自助者」，下面是「God helps those who help themselves」我希望它能被点按选中，选中的时候一定注意中英文两句话要一起被选中，而且上下左右请留出边距；对了，选中后要弹出一个选项，左边是复制，右边是一个复制的图标；啊，对了对了，英语字体最好是圆体字，而且两段文字都要加粗，就是小标题加粗的那种感觉。

那么为什么我要说这些呢？因为 SwiftUI 的设计思路正是描述性编程语言，你将上面这段话稍微整理一下，就是 SiwftUI 的写法。比如下面这段文字就是我整理好的 SwiftUI 代码：

开个玩笑，我们还缺一步，把这段文字翻译成 SwiftUI 的写法就行了。

透过 SwiftUI 语法了解如何设置点按弹窗

这个功能的全部实现代码如下，我会在下文中逐步讲解每一段代码的用途。

SwiftUI 由两类代码组成，分别是 View 和 Modifier。如下图所示，这两类代码都可以在 Xcode 中直接拖出来用，你要做的只是玩拼图把它们拼在一起拼出你想要的功能。其中 View 表示一个视图，比如我们在手机上看到的一个滑条，一张图片，一个列表等种种，都叫做视图；而 Modifier 则是修饰器，它的作用是为视图增加功能，比如圆角，动画，阴影，边际，背景等等。下图就是它们在 Xcode 中的预设。

Xcode Library写 SwiftUI 得过程，实际上就是将一个个最基本的 View 像滚雪球一样越包越大的过程，你把一个个基础的视图和修改器用一个更大的视图包在一起，用修改器修改更大的视图，就能实现复杂的功能。现在我们来观察上述代码的结构，你会发现整段代码由一个名叫 VStack 的视图和众多 Modifier 组成。

那么 VStack 是什么呢？它的里面为什么会包着两个 Text 呢？其实 VStack 和 Text 本质上都被归为 View 这一类，VStack 的作用是将两段文字包在一起以便于被整体选中。而后面的全部代码都是这个 VStack 视图的修饰器，为其添加颜色，边距，以及点按弹窗功能。其中，上图的例子里的 View 又包含了两个更小的 Text View，每个 Text View 又被 .font 的字体修改器修改。

说了那么多你可能已经晕了，那么我们来对比看看第一段，仔细观察下面这张图。发现了吗？纵向排列的 View 在 SwiftUI 里叫做 VStack，它用一个花括号 {包住里面的内容}；而文字的 View 在 SwiftUI 里叫做 Text。中文里圆括号中的各种要求，正是 SwiftUI 里的各种修改器，语法结构是 「.修改器的名字」。比如下图中我们想修改为小标题的字体，就写 .font(.headline)。

是时候攻克更多的内容了，我们来看看下面这段代码，我先不说你看看。对了，正是这样，这段代码中包含三个针对 VStack 的修改器，分别是正文设置为白色 .foregroundColor(Color.white)，四周加边距 .padding()，和显示点按菜单.contextMenu()。

终于聊到了点按菜单的实现方式了，点按菜单是什么呢？它的实质就是一个 View，和其它任何 View 并无二致，因此我们需要在 contextMenu 里放一个 View 即可。而点按菜单，顾名思义，就是一个按钮，那么我们设置一个 Button View。在按钮中，我们需要设置两个点：按钮的动作，也就是 action，里面的两行代码会将名言文字复制到剪贴板；另一个点是下面的 HStack ，表示一个水平排列的 View。其左边是一个文字，右边是一个图标。这里关于 Button 的解释若你不熟悉编程可能会有点晕，没关系，我会在其它文章详细讲解。

在上图中，你会发现背景变成蓝色的了，为什么？因为我写文章的时候已经是晚上了，手机自动切换到了夜间模式，我们的应用程序也完成了自动切换。这是如何做到的呢？我会在其它文章中详细讲解。

扩展阅读

我之前写过部分关于程序开发的文章，若你有兴趣可以去看看，它们的内容依旧很新值得参考。

难度-低：应用程序开发：使用苹果官方模版制作应用图标 - Sketch + Xcode^[1]

难度-低：善用学习资源，你也可以成为 iOS 独立开发者^[2]

难度-中：Swift: 巧用开源，查看原始代码^[3]

写在文后

若你耐着性子读完本文，你可能会发现我用来展示的代码多了个完全没用的 HStack，你可能会发现我没讲那个复制图标是哪来的，你可能会好奇这么多代码如何整理成更易读的小块。如果你是老手，你可能会好奇 contextMenu 如何用在 UIKit 上；如果你对编程零基础，你可能会发现用 SwiftUI 写程序界面和简单功能其实没那么难，无非就是对大白话的翻译。

若你想仔细的学习 SwiftUI 和苹果或安卓应用程序开发，欢迎在文末写下你想学习的内容，我会参考写文。若你因为文中的长代码而感到害怕，觉得程序员都是天才，脑子超好用能将这些代码一次性全写出来，不是这样的。比如上面代码中的例子，一开始你只有一个简单的思路，我要一句名言，能点按复制就行。于是乎你放下了一个文字的 View，写出来了觉得不好看，扔各种修饰器上去加颜色改字体加图标种种，雪球越滚越大你的程序也越加好看和拥有越多功能。SwiftUI 是一个全新的 UI 语言，别怕，在这里我们都是新手。

「试想你是一名美术，完全不了解程序。而你眼前只有一位盲人程序员，你想让他帮你实现这个程序，你会怎样告诉你的程序员你想要的效果？」

你会说，嗨，这么简单的事，用 SwiftUI 美术我自己就能写。

 

本文章转载自奇点日报。