SwiftUI 与 iOS 开发入门 on ClearSec Wiki

Hello World

Mon, 01 Jan 0001 00:00:00 +0000

说明

目前（2022 年 1 月）主流的 iOS 开发使用 Xcode 项目（Xcode project）进行，本文为了支持 iPadOS 平台并简化说明，使用最新的由 Swift Package Manager 管理的项目格式，此格式在 13.2 以上版本的 Xcode 上同样支持。实际开发时建议使用更加完善的 Xcode project。

创建项目

Swift Playgrounds（iPad）

在 Swift Playgrounds（4.0 以上版本）中，选择底部的 App。

Xcode Swift Playground App

在 Xcode（13.2 以上版本）中，选择 File > New > Project 中的 Swift Playground App。

Xcode Project

传统的 Xcode project，部分内容与 Swift Playground App 不同。

打开 Xcode，点击 Create a new Xcode project，选择 iOS 栏下的 App。在项目的配置界面，配置：

Product Name：应用名称
Team：开发使用的 Apple ID，可以为 None
Organization Identifier：一个逆序的 DNS 名，如果不考虑上架可以任意
Interface：选择 SwiftUI
Language：Swift
Use Core Data 和 Include Tests：本教程不涉及，可以不选

其余步骤按照默认配置即可。

构建 View

Mon, 01 Jan 0001 00:00:00 +0000

接下来，我们将展开介绍如何构建 View。

View 的组合方式

在 body 中，有一些非常方便的方式来组合不同的 View。另外，body 还对其中的表达式有一定的限制。

组合

在 body 中，你可以通过这几种方式组合多个 View，不需要写出 return：

条件控制语句

你可以用 if-else 语句有条件地显示不同的 View：

if type == .text {
 Text("Hello, world!")
} else if type == .image {
 Image("hello-world")
} else {
 Color.blue
}

或者，只有 if：

if revealGrade {
 Text(student.gpa)
}

当然，if let 语句也是可以的：

if let npyName = student.npyName {
 Text(npyName)
}

你还可以用 switch：（实际上编译器将其转化为 if-else 语句）

switch type {
case .text: Text("Hello, world!")
case .image: Image("hello-world")
default: Color.blue
}

多个 View

你可以一次返回多个 View，这种 View 叫做 TupleView：

Text("Hello, world!")
Image("hello-world")
Color.blue

一般这种 TupleView 多用于 View 的排列。比如，将几个 View 在垂直方向依次排列：

VStack {
 Text("Hello, world!")
 Image("hello-world")
}

我们将在下面进一步介绍 View 的排列。

数据流基础

Mon, 01 Jan 0001 00:00:00 +0000

我们之前介绍的都是一些非常简单的情况：它们都不涉及变化的状态。然而，几乎所有的应用都需要依赖于变化的数据。我们需要一种方法，使得当数据更新时及时、正确地更新我们的 UI。我们将介绍 UI 与数据绑定过程中涉及的一些最基本的常见数据流。

State

我们来看一个简单的例子。在我们的 View 中，需要记录用户点击的次数，并显示在屏幕上。你可能想要这样写：给 ContentView 加上一个变量 count，然后在 Button 中更改这个值：

struct ContentView: View {
 var count: Int = 0

 var body: some View {
 HStack {
 Button("Click") { count += 1 }
 Text("\(count)")
 }
 }
}

但这样是不能正常工作的。

首先，这个代码并不能通过编译：

Left side of mutating operator isn't mutable: 'self' is immutable

原因是，struct 是值类型，一般的函数不能够修改其变量的值。

而且，有一个更加深层的原因。我们改变了 count，并且希望 Text("\(count)") 能显示最新的值。但是，ContentView 并不知道当 count 更新时需要更新 UI。

修改的方法很简单，只需要在 var count: Int = 0 前加上 @State：

@State var count: Int = 0

这样，就能够通过编译，并且我们的界面会随着 count 的更新而更新了：

@State 是什么语法？为什么能够修改 count？

@State 涉及到一种叫 property wrapper 的语法。简单来说，property wrapper 有如下特性：

是一个包装后的类型，但对外的表现就像是被包装前的数据一样
当被包装的值被设定或被读取时，执行特定的代码

因为我们实际上是修改 @State 所包装的值而非 @State 变量本身，所以是可以修改 count 的值的。

声明式 UI 与 MVVM

Mon, 01 Jan 0001 00:00:00 +0000

以上是对 SwiftUI 基础内容的介绍。在你将来学习更加高级的内容之前，有必要对 SwiftUI 的 UI 构建作一个概念上的总览。我们将讨论两个核心概念：声明式 UI，以及 MVVM 架构。

声明式 UI

我们先来看两段代码。

一段使用 SwiftUI：

Text("Hello, world!")
 .font(.system(size: 20, weight: .bold))
 .foregroundColor(.red)

另一段使用 UIKit：

let label = UILabel()
label.text = "Hello, world!"
label.font = .systemFont(ofSize: 20, weight: .bold)
label.textColor = .systemRed

它们都创建了一个带有一定样式的文本 UI。然而，它们的构建方式有着本质上的不同。对于 SwiftUI，我们描述 Text 及其字体、颜色等各种样式，而对于 UIKit，我们通过设定属性值来更改。前者称为「声明式」（declarative），而后者称为「命令式」（imperative）。

你可以从这两个词中体会到两种不同代码的显著区别。在 SwiftUI 中，我们不会使用“命令”语句来告诉一个 View “怎么做”，而是通过“声明”一个 View 以及它的结构、特征来告诉这个 View “做成怎样”。

当 UI 的状态需要随着状态的变化而更新时，二者的优劣变得非常明显。命令式 UI 构建需要在每次状态更新时都通过一定的逻辑更新所有关联的 UI，而声明式 UI 构建只需要在一开始将所有可能的 UI 状态描述出来，就可以形成状态到 UI 的一个映射。

这两种方式的复杂程度差别有多大？作个简单的计算：假如我们的 UI 有 10 种可能的状态，那么命令式 UI 最多需要根据 $\dbinom{10}{2} = 45$ 种不同的状态转移定义来定义 UI 更新函数，而声明式 UI 最多不过需要定义 10 种不同状态下的 UI。更糟糕的是，一旦命令式 UI 的某一步 UI 更新出现问题，那么很可能接下来的更新都会导致错误的 UI。因此，当状态复杂到一定程度的时候，命令式 UI 的正确更新变得几乎不可能（回想一下你之前写过的命令式 UI，比如贵系同学们用 Qt 写过的大作业）。

后续拓展

Mon, 01 Jan 0001 00:00:00 +0000

本文仅对 SwiftUI 中一些最基本的知识作了介绍，而这远远不够。要想开发一个完整的应用，你还需要学习更多内容。

这是一些仅供参考的建议：

经常探索官方文档，看看你能使用的工具有什么
看看历年 WWDC 有什么视频讲解的内容是你需要的，关注每年的 WWDC
不要惧怕英文内容，阅读英文文档是开发的必经之路
学会用英文搜索，尽量不用中文搜索

概念性知识

这些概念性知识能够帮助你理解 SwiftUI 是如何运行的，进而帮助你写出效率更高、更加正确的程序。SwiftUI 本身并不复杂，但其原理需要深入的学习才能理解，而对原理的理解往往会在很大程度上影响程序的质量。

这些话题非常重要：

SwiftUI 生命周期：App、Scene 和 View 之间的关系
SwiftUI 中的数据流：SwiftUI 中的数据流及其使用原则
MVVM 架构：虽然我们已经简单介绍过，但你仍应听一听 CS193p 的这节课
View Identity：在底层，不同的 View 之间是如何区分的？

技术性知识

这些技术性的知识是一些“SwiftUI 能做什么”的集合，基本上是官方文档中你能用的所有 SwiftUI 现成工具，可以需要时再查阅，也可以无聊时随便翻翻。遇到问题时，Google 、Stackoverflow 和 WWDC 视频是你可靠的助手。

原生组件：文字、图片、按钮等组件
排布：Stack、Grid、ScrollView、NavigationView 等
数据流与状态：State、Binding、ObservedObject 等
绘画与动画：绘制形状、添加动画
触控识别：识别用户触摸输入
View modifier
在 SwiftUI 中使用 UIKit

其它相关知识

Combine 框架：为 SwiftUI 设计的异步事件管理框架
UIKit 课程：CS193p 的 UIKit 完整课程