SwiftUI基础——创建并组合视图

Swift UI 基础

今天开 2020 年的 WWDC 了，所以来学习一下 Apple 的 app 开发吧。😜

这篇文章是 Apple 给的 SwiftUI 官方教程的一部分，我自己阅读学习的时候顺便翻译的，并加入了一些我自己的理解、看法和拓展。

英文原文：https://developer.apple.com/tutorials/swiftui/tutorials

创建并组合视图

原文链接：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

这个教程教你构建一个 iOS app —— Landmarks。这个 App 是用来发现、分享你喜欢的地点的。我们会从构建一个显示地标(Landmarks) 详情的 View 开始。

要布局这个地标详情的 View，我们用 stacks 来组合、堆放¹ 图片和文本视图组件。我们还要用引入 MapKit 组件来提供地图视图。在你修改视图的时候，Xcode 会给你及时的反馈，让你看到改变的代码。

下载项目文件，跟着下面的步骤开始构建工程吧：

预计用时：40 分钟

下载项目文件：https://docs-assets.developer.apple.com/published/b90bcabe8b9615e22850aaf17f3e7dfd/110/CreatingAndCombiningViews.zip

Xcode 11：https://itunes.apple.com/us/app/xcode/id497799835?mt=12

§ 1 创建新项目和探索画布

原文链接：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#create-a-new-project-and-explore-the-canvas

在 Xcode 创建一个使用 SwiftUI 的新项目。在里面探索画布、预览和 SwiftUI 的模版代码。

要在 Xcode 里预览视图，并与之交互，需要 macOS Catalina 10.15。²

Step 1. 打开 Xcode，然后在 Xcode 的启动页面点击 Create a new Xcode project，或者选择 File > New > Project。³

Step 2. 在模版选择窗口里选择 iOS 平台、Single View App 模版，然后点击 Next。

Step 3. 在 Product Name 处输入“Landmarks”，user interface 选择 SwiftUI，点击 Next。然后选择一个位置在你的 Mac 上保存这个项目。

Step 4. 在项目导航栏(Project navigator)里选择ContentView.swift。默认情况下，SwiftUI 声明了两个结构体，第一个遵循了 View 协议，是用来描述视图的内容和布局的；第二个结构体声明了对这个视图的预览。

Step 5. 在画布(canvas)里点击 **Resume ** 来显示预览。

Tips：如果画布没有显示，你可以选择Editor > Editor and Canvas，来打卡它。

Step 6. 在 body 属性里，把 “Hello World” 改成对你自己打招呼的话。

在你改变视图体(a view’s body property)的时候，预览及时地反映出了你的改变。

完成这一节后，我们的主要代码看上去是这样的：

struct ContentView: View {
   
    var body: some View {
   
        Text("Hello SwiftUI!")
    }
}

【译注】：由于本人使用 MacOS Mojave 10.14，所以无法使用预览的功能。这还是相当痛苦的，没有预览几乎难以进行 UI 设计了，所以我采取的代替方案是在 Playground 中写 SwiftUI。实现的步骤如下：

新建一个 Playground，选择 iOS 平台，Blank 模版。打开 Playground 后，把里面的代码替换如下：

import SwiftUI
import PlaygroundSupport

struct HelloWoldView: View {
   
    var body: some View {
   
        Text("Hello World")
    }
}

PlaygroundPage.current.setLiveView(HelloWoldView())

运行 Playground 至第 10 行（鼠标移到第十行的行标处，数字变成表示运行的箭头▶️，点击这个箭头），即可看到预览：

这样勉强可以进行 SwiftUI 的开发，只是无法如在 Catalina 的 Xcode 项目里那样和画布交互。

§ 2 定制文本视图(Text View)

原文链接: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#customize-the-text-view

通过修改代码，你可以定制视图的显示效果。当然，你也可以用检视器(inspector)来发现你可以做些什么，并帮助你完成代码。

在构建 Landmarks app 的过程中，你可以随意使用任何编辑器：代码编辑器(source editor)，画布(canvas)，检视器(inspectors)。无论你使用了那种方式来编辑，代码总会自动保持更新。

接下来，我们将使用监视器来定制文本视图。

Step 1. 在预览中，按住 command 点击我们写了问候的文本，会出现一个结构编辑弹出框(popover)。在这个弹出框里，选择 Inspect。

这个弹出框里还有其他的你可以定制的属性，不同的视图可能有不同的属性。

Step 2. 在检视器中，把文本(Text)改成 “Turtle Rock” —— 你的 app 中要展现的第一个地标。

Step 3. 把字体修改成 Title (标题)。

这个操作是让文本使用系统字体，这种字体可以跟随用户当前的偏好设置。

【译注】也可以使用代码完成这个更改: Text("Turtle Rock").font(.title)。哈哈，这种写法就很 Swift，具体这是什么意思下面的原文有写。

要用 SwiftUI 定制视图ÿ