iOS 开发 | SwiftUI 基础：Text + Stacks + Image + MapKit

作者：Aaron Dean，日期：2020 – 04 – 17

1. SwiftUI简介

SwiftUI：使用更少的代码，写出更好的应用。

SwiftUI 框架采用声明式 Swift 语法，提供了用于声明APP用户界面（UI）的视图（views）、控制（controls）和布局结构（layout structures）。SwiftUI 提供诸如事件处理（event handler）程序，来处理用户点击、手势和其他类型的输入，也提供了相应的工具来管理数据流（Data Flow）。我们知道，APP模型和用户界面的视图和控件之间存在数据流。

你可以创建遵循 View 协议的自定义视图，并将它们与 SwiftUI 视图组合在一起，用来展示文本、图像、使用堆栈的自定义图像、列表（list）等。另外，你可以使用修饰符（modifiers）来渲染内置视图（built-in views）和自定义视图或增强交互性。并且，这些用于上下文（ context ）和展示（presentation）的视图和控件可以在多个平台共享，如 Mac、iPhone 和Apple watch等。

目前，SwiftUI 还需要与其他框架一起使用。你可以将 SwiftUI 视图来自与 UIKit、AppKit 和 WatchKit 等框架中的对象集成，以实现特定平台上所需的功能。你也可以在 SwiftUI 中自定义辅助功能支持，并针对不同的语言、国家或地区实现APP界面的本地化。

Swift 提供了实时预览模式，也就是说，当你修改设计时，Xcode 能够实时反馈修改之后的效果。这样，开发效率是不是就提高了许多？

2. 新建项目

新建项目的三种方式：

打开 Xcode，点击“Create a new Xcode project”
打开 Xcode，选择“File > New > Project”
如果你的 Xcode 已经打开，同时按下“ ⇧ + ⌘ + N ”

选择 iOS系统下的单视图应用（Single View App）模板，点击“Next”。

填写应用名称（Product Name）、开发者信息，并选择 SwiftUI 构建UI，点击“Next”。

选择项目文件存放的位置。

项目创建完成。

在项目导航区，选择 ContentView.swift 文件，新建项目后出现的就是下面的样子，import 关键词用于引入框架。点击画布的“Resume”或同时按下快捷键“⌥ + ⌘ + P”显示（刷新）预览，画布上会打印出“Hello， World！”文本。点击画布上视图旁边的“Live Preview”可实时预览视图的改变，你可以尝试修改 Text 修饰符里的文本，看看实时预览的效果。比如，你删除“Hello，”，画布里会立即刷新，只显示“World！”。如果画布没显示，选择“Editor > Canvas”或使用快捷键“⌥ + ⌘ + Enter”打开，或者你想隐藏画布，也可以使用这一快捷键。

3. Text View

在SwiftUI 中通过调用被称为修饰符（modifiers） 的方法自定义视图，修饰符包装视图以更改其显示或其他属性，每个修饰符都会返回一个新视图，因此通常将多个修饰符垂直堆叠在一起使用。

具体来说，你可以通过在代码编辑区修改代码、使用 inspector 或直接从库（Library ）将视图控件和修饰符拖到画布上来添加修饰符。无论哪种方式，代码都会更新。你可以点击 Xcode 右上方的“+” 或使用快捷键“⇧ + ⌘ + L”调出库（Library）。

比如，我可以在文本 Text( ) 后通过点语法（.语法）修改文本的字体、文本颜色、背景颜色、边框大小和间隙。

效果：

4. 使用 Stacks 组合视图

创建 SwiftUI 视图时，你可以在视图的 body 属性中描述视图的内容、布局和行为。但是body 属性遵循“some VIew”，body 属性仅会返回某个单一视图。所以为了使多个视图能够显示，你可以在SwiftUI中使用 HStack、VStack、ZStack 来组合多个视图。“H”代表水平，“V”代表垂直，“Z”代表在垂直于屏幕的方向上（从后向前）对视图进行堆叠，某视图对应的代码越往后，该视图越往前显示。比如，在下面的示例代码中，用一个 HStack 将你好”和“世界”两个文本“在水平方向组合，它们之间的 “spacing”（间隔）为 20；然后，再将 HStack 和“通过 Stacks 组合视图”文本视图嵌入一个VStack，完成两者的垂直布局。在最外层，是一个 ZStack，使用 ZStack 能使视图在Z（即垂直于屏幕）方向进行堆叠。可以看到，ZStack年能够是试图从后往前堆叠，即代码越往后的部分越往前显示。这样，我就给整个 VStack加了一个水印：SwiftUI。

效果：

5. Image View

准备好图片并将其拖入项目的“Assets.xcassets”文件中，接下来看一下如何自定义一个 Image View。新建一个叫“CircleImageView”的 SwiftUI View：⌘ + N，选择“SwiftUI View”，点击“Next”后填写文件名称，然后将 Text( )换成 Image( )。

使用以下修饰符来渲染和布局图片：

使用修饰符 resizable( )让图片完整的出现在屏幕中。
显示尺寸：使用修饰符 frame( )为图片定义显示的尺寸，frame 是一个容器。
裁剪图片：使用修饰符 clipShape(Circle( ))（裁减成圆形）
添加阴影和描边：使用修饰符 overlay( ) 和 shadow( )
调整位置和边距：使用修饰符 offset( ) 和 padding( )

效果：

6. 引入MapKit

使用快捷键“⌘ + N”新建一个 SwiftUI 视图：MapView。使用 import 语句引入 MapKit 后，你就可以开始创建视图了，然后通过使用 MapKit的MKMapView 类来渲染地图。为了能够在 SwiftUI 中使用 UIVIew 子类，MapView需要遵循 UIViewRepresentable协议。UIViewRepresentable协议要求添加两个方法：makeUIVIew (context: )用于创建 MKMapView，updateUIView(_: context : )。本例使用广州塔的坐标（纬度：23.1092，经度：113.319147）。示例代码和效果如下：