SwiftUI 初体验

2019 WWDC 给开发者最大惊喜的项目莫过于 SwiftUI 了，毫不夸张的说，SwiftUI 完全重构了 Apple 平台的开发模式，同时配合新引入的 Combine 框架，基于函数响应式的 MVVM / MVp 架构将逐渐成为主流。唯一的问题就是 iOS 13 only，但对于开发者来说并不需要担心，时间会为我们解决这个问题。

0. 预备知识

严格来说，学习和使用 SwiftUI 并不需要任何 硬性 的预备知识，但以个人初步接触和学习的体验来看，拥有以下知识会对学习 SwiftUI 有额外的帮助：

1. 函数响应式编程框架使用经验，如 RxSwift 或 ReactiveCocoa
2. Flutter 开发经验，有助于理解 SwiftUI 的布局

1. 硬件环境

使用 SwiftUI 进行开发唯一的硬性要求就是使用 Xcode 11，截至发文最新版本是 beta2，但同时需要注意的是，虽然 macOS 10.14 Mojave 即可安装和使用 Xcode 11，但如果想体验 SwiftUI 强大的即时预览功能，则必须同时配合使用最新的 macOS 10.15 版本。究其原因是因为 SwiftUI 的预览功能是构建于 macOS 之上，以保证渲染的性能和实时性。

2. 创建项目

使用 Xcode11 创建一个新项目，语言选择 Swift ，同时勾选上 Use SwiftUI 选项。严格来说，因为 UIKit 和 SwiftUI 完全可以混合使用，所以即使创建了一个传统模式的项目，你依然可以通过新建 SwiftUI 文件的方式来配置使用。

3. 项目结构

从创建好的项目结构中可以看出，和传统项目比较，启用了 SwiftUI 的项目中并没有包含 Main.storyboard

3. 实时预览

打开项目默认创建的 ContentView.swift 文件，即可看到 Xcode 的工作区被自动分成了两部分：

点击预览区域右上角的 Resume 按钮，即可实时预览到当前 View 的布局效果：

3. 层叠和嵌套

SwiftUI 的布局方法和 Flutter 有相似之处，基本原理均为使用基本元素堆叠/嵌套，形成新的模块和组件，就像搭积木一样逐渐实现整个 UI 结构的构建。下面以一个简单的登录页面，简单体验一下 SwiftUI 的构建模式。

页面主要由一个描述性标题，以及一个点击登录按钮组成：

接下来直接上代码：

var body: some View {
    VStack(alignment: .center, spacing: 100) {
            
    }
}

首先在最外层，我们使用一个 VStack 作为底层容器，有 iOS 开发经验的同学看名字就可以大概联想到 UIKit 中的 UIStackView ，同时其首字母 V 意为 Vertical ，即垂直方向的 Stack View。

接下来在 VStack 容器中加入我们的子控件，一段文本和一个按钮：

var body: some View {
    VStack(alignment: .center, spacing: 100) {
        Text("Welcome to Star Order 3 !").font(.title)
        
        Button(action: {
            print("Login button clicked")
        }) {
            Text("Login with GitHub").font(.body).color(.red)
        }
    }
}

3. 后记

初步体验下来，SwiftUI 的使用体验是要胜于 Flutter 等支持“热重载”的方案的，完全不需要启用应用即可预览界面更改，体验非常不错，同时 SwiftUI 的链式语法写起来也完全没有早些年申明式代码写 UI 的痛苦。在可以预见的2-3年内，在写界面这件事情上，代码党和 XIB/Storyboard 党的争执即将不复存在。