SwiftUI 入门指引教程（一）

这是 WWDC2019 发布的 SwiftUI 布局框架的少量官方示例。

首先为了保证项目的正常运行，需要更新 Mac OS 至 10.15 beta 版，以及 Xcode 使用 Xcode 11 beta。

1.创立项目运行

首先创立一个新的项目，模板可以使用第一个Single View App，项目名称官方的Demo叫做Landmarks，勾选上Use SwiftUI如图。

image.png

而后创立项目，点击打开 ContentView.swift，代码如下：

import SwiftUIstruct ContentView: View {    var body: some View {        Text("Hello World")    }}struct ContentView_Preview: PreviewProvider {    static var previews: some View {        ContentView()    }}

目前该类公告了两个 struct，第一个是该 View 的实现，第二个是为了实现该 View 的浏览。

而后在 canvas 视图上点击 Resume（假如找不到，打开 Editor > Editor and Canvas ）。

而后修改 View 实现的代码，可以实时看到效果

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

2、定制TextView

在之前的基础上，按住Command，并单击 Hello SwiftUI!，会弹出菜单，选择Inspect修改属性。

image.png

点击之后

image.png

修改 Font 为 title。

而后手动修改UI代码，增加颜色为绿色：

struct ContentView: View {    var body: some View {        Text("Turtle Rock")            .font(.title)            .color(.green)    }}

接下来在代码中单击文本的公告Text("Turtle Rock")，可以看到弹出的菜单，点击检查器inspect，把颜色再改回黑色。

这个时候你会发现，Xcode会删除Text("Turtle Rock")这一行。

3、使用 Stack 去组合 View

这一部分会增加几个视图，并使用 Stack去组合。

单击 Text("Turtle Rock")，弹出的菜单中选择 Embed in VStack。

image.png

单击Xcode窗口右上角的加号按钮（+）打开库，而后在“Turtle Rock”文本视图后将Text视图拖到代码中的位置。

替换文本为 Joshua Tree National Park，设置字体为.subheadline。

而后编辑VStack的初始化方法，代码修改为 VStack(alignment: .leading) { 使得它左对齐。

而后在 canvas 里面 command 并单击 Joshua Tree National Park，选择 Embed in HStack 增加一个新的 textView，输入内容 California，设置字体为 .subheadline。

通过将 Spacer 增加到包含两个 Text 的水平堆栈，使得布局使用设施的整个宽度，如下：

struct ContentView: View {    var body: some View {        VStack(alignment: .leading) {            Text("Turtle Rock")                .font(.title)            HStack {                Text("Joshua Tree National Park")                    .font(.subheadline)                Spacer()                Text("California")                    .font(.subheadline)            }        }    }}

Spacer 会使用俯视图所有的空间，彻底的开展，不需要通过指定内容大小等属性。

最后，使用 padding()修饰符，增加到Stack的实现结束的地方，给界面留少量呼吸的空间。

struct ContentView: View {    var body: some View {        VStack(alignment: .leading) {            Text("Turtle Rock")                .font(.title)            HStack {                Text("Joshua Tree National Park")                    .font(.subheadline)                Spacer()                Text("California")                    .font(.subheadline)            }        }        .padding()    }}

4、Image 增加图片

这一部分会增加一个独立的原型的自己设置图片视图，将遮罩，边框和阴影应用于图像。

将图片增加到资源 asset 目录下。

image.png

创立一个新的额 SwiftUI 类，命名为 CircleImage.swift，并替换其实现如下，使用Image 的初始化方法 Image(_:)。

struct CircleImage: View {    var body: some View {        Image("turtlerock")    }}

Image初始化方法之后增加圆形剪裁形状，Circle 可以像这样用做于一个蒙版，或者者用作一个试图内的原型的填充。

struct CircleImage: View {    var body: some View {        Image("turtlerock")            .clipShape(Circle())    }}

而后增加其他的属性，颜色，线宽和半径为10个单位的阴影：

struct CircleImage: View {    var body: some View {        Image("turtlerock")            .clipShape(Circle())            .overlay(                Circle().stroke(Color.gray, lineWidth: 4))            .shadow(radius: 10)    }}

6.组合成介绍 View

在第一个 ContentView 类中插入一个新的 VStack 视图，位置如下：

struct ContentView: View {    var body: some View {        VStack {            VStack(alignment: .leading) {                Text("Turtle Rock")                    .font(.title)                HStack(alignment: .top) {                    Text("Joshua Tree National Park")                        .font(.subheadline)                    Spacer()                    Text("California")                        .font(.subheadline)                }            }            .padding()        }    }}

增加一个 MapView，在新增的 VStack 的下面，设置 MapView 的 Size， 如下：

struct ContentView: View {    var body: some View {        VStack {            MapView()                .frame(height: 300)            VStack(alignment: .leading) {                Text("Turtle Rock")                    .font(.title)

仅指定 height 参数的话，View 会自动调整其内容的宽度。在这种情况下，MapView 会扩展以填充可用空间。

点击 Live Preview 实时预览视图。

而后在 MapView 的下方，增加我们上一步实现的 CircleImage，并且设置向上的位置偏移量。

            CircleImage()                .offset(y: -130)                .padding(.bottom, -130)

在最外面的 VStack 的底部增加一个 spacer，把内容整个推到屏幕的上面。

最后：让 MapView 忽略上面的安全距离，在MapView下面插入 .edgesIgnoringSafeArea(.top)，完整的类实现代码如下：

struct ContentView: View {    var body: some View {        VStack {            MapView()                .edgesIgnoringSafeArea(.top)                .frame(height: 300)            CircleImage()                .offset(y: -130)                .padding(.bottom, -130)            VStack(alignment: .leading) {                Text("Turtle Rock")                    .font(.title)                HStack(alignment: .top) {                    Text("Joshua Tree National Park")                        .font(.subheadline)                    Spacer()                    Text("California")                        .font(.subheadline)                }            }            .padding()            Spacer()        }    }}