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 来组合、堆放1 图片和文本视图组件。我们还要用引入 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。2
Step 1. 打开 Xcode,然后在 Xcode 的启动页面点击 Create a new Xcode project,或者选择 File > New > Project。3
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 定制视图ÿ