创建和组合视图

概述

本教程将指导完成一款地图类 APP 的开发，APP 名称为「Landmark」（Landmark 是指标志性建筑）。本教程将从详情页开始开发页面。

本 APP 将使用 Stacks 来组合图像和​​文本组件，并进行分层。首先将用一个标准的 MapKit 地图组件将地图模块添加到页面中。在进行页面设计时，Xcode 会提供实时反馈，因此您可以查看这些更改如何转化为代码。

点击下载示例代码，并可使用他来构建项目。建议按照教程先撸一遍。

1 创建一个新项目

学习如何使用 SwiftUI 创建一个新 Xcode 项目，并浏览 Xcode 中的画布和预览功能，并且查看 SwiftUI 提的初始代码。

为了更好的体验整个教程中描述的所有最新功能，并且想体验到 Xcode 的实施预览功能，请先确保的 Mac 运行的是 macOS Big Sur 或更高版本。

1.1 欢迎界面

打开 Xcode 并在启动界面中点击「Create a new Xcode project」, 或者选择左上角依次「File」→「New」→「Project」。

1.2 选择模板

在模板选择界面中，选择「iOS」，并选择「APP」，然后点击下一步。

1.3 创建项目

产品名称输入「Landmarks」，界面选择「SwiftUI」，生命周期选择「SwiftUI APP」，点击下一步，其中记得不要勾选上「Use Core Data」。然后选择保存的地点来保持你的项目。

1.4 查看文件 「LandmarksApp.swift」

在 Xcode 左侧项目导航中选择文件 「LandmarksApp.swift」。使用 SwiftUI 应用生命周期（Life Cycle）将具有符合 APP 协议，该构造函数的 body 属性返回一个或多个场景，这些场景又提供显示内容。其中 @main 属性标识了应用程序的主入口。

import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

1.5 查看文件「ContentView.swift」

在 Xcode 左侧项目导航中选择文件 「ContentView.swift」。默认情况下，SwiftUI 识图文件声明两个构造函数。第一个构造函数符「ContentView」描述内容和布局，第二个构造函数「ContentView_Preview」用来预览。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

1.6 预览

在画布（Canvas）中点击 「Resume」显示预览。如果画布不可见，可以点击顶部的「Edit」→「Canvas」勾选进行显示。

1.7 修改文案

在 body 属性中，更改「Hello World」成你自己想输入的文案。当更改 body 视图中的代码时，Xcode 会更新预览。

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2 自定义视图

可以通过修改代码，或者在检查器「inspector」中修改界面。

在开发「Landmarks」APP时，通过代码编辑「source editor」、画布「canvas」、属性检查器「inspectors」来修改接，无论用哪种方式，代码会保持更新同步。

2.1 在预览中修改界面

在预览中，鼠标移到需要调整的内容上，并按住 「Command」键点击。选择「Show SwiftUI Inspector」，弹出的窗口可以定义不同的属性，具体可以跟内容的类型有关。

2.2 修改文案

使用检查器将文本更改为“Turtle Rock”，这是您将在应用中显示的第一个地标的名称。

2.3 修改文本样式

将字体修改为「Title」可以修改系统字体，会适当适应首选字体的大小和位置。

2.4 手打代码修改界面

手动修改「padding()」，在下面加上「foregroundColor(.green)」，将文本的颜色更改为绿色。

tps：要自定义 SwiftUI 视图，您可以调用称为「Modifiers」 链式修饰的方法。修饰符包装视图以更改其显示或其他属性。每个修改器返回一个新视图，因此通常会链接多个修改器，垂直堆叠。

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2.5 在代码中快速修改

除了手动修改，可以安卓「Command」点击 「Text」代码块。在弹窗的界面选择「Show SwiftUI Inspector」。可以修改颜色试试，选择「Color」中的「Inherited」（继承）修改为其他颜色。

2.6 预览

Xcode 会自动预览刚刚更新的代码。不过最好还是删除掉刚刚你选择的颜色修饰代码「.foregroundColor(.green) 」，可以改为猛男该有的颜色「.pink」。

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3 使用 Stacks 组合界面（布局）

除了在上一节中创建的标题之外，本节将添加包含有关地标的文本视图，例如公园名称和所在州。

创建 SwiftUI 界面时，在视图的 body 属性中添加内容、布局和行为；但是，该 body 属性仅返回一个视图。您可以在stacks 中组合和嵌入多个视图，将视图水平、垂直或从后到前组合在一起。

在本节中，您将使用垂直堆栈将标题放置在包含公园详细信息的水平堆栈上方。

3.1 VStark 垂直布局

按住「Command」并点击文本，在弹窗中点击「Embed in VStack」。

3.2 在 VStack 中添加一个文本

单击 Xcode 窗口右上角的加号按钮 (+) 打开库，然后将一个「Text」视图拖到代码中“Turtle Rock”文本视图正下方的位置。

3.3 替换文本内容

将 Text 中的文本替换成「Joshua Tree National Park」。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }

3.4 添加修饰符

将新添加的文本设置成 subheahline

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3.5 对齐文案

在 VStack 中增加初始值 「alignment: .leading」，文案将靠左对齐。默认情况下，Stack 默认提供居中对齐。

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3.6 HStack 水平布局

在画布中，按住 Command 键并单击“Joshua Tree National Park”，然后选择“Embed in HStack”。

3.7 设置字体

在位置后添加一个新的文本视图，将占位符文本更改为公园的状态，然后将其字体设置为subheadline。

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3.8 Spacer

要指示布局使用设备的整个宽度，请通过向包含Spacer两个文本视图的水平堆栈添加 a来分隔公园和状态。

import SwiftUI

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)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3.9 Padding

在整个框架中增加 「.padding」，使得界面与手机边缘有间距。

使用 padding() 修饰地标名称，并让两个中间留出空隙。

import SwiftUI

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()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

4 创建自定义图片

设置好名称和位置视图后，下一步是为地标添加图像。

您将创建一个自定义视图，将蒙版、边框和投影应用于图像，而不是在此文件中添加更多代码。

4.1 添加文件

查找项目文件的资源文件夹; 将其拖到资产目录的编辑器中。Xcode 为图像创建一个新的图像集。[email protected]

4.2 创建识图文件

选择“文件”>“新建”>“文件”以再次打开模板选择器。在用户界面部分，选择“SwiftUI 视图”并单击下一步。命名文件并单击创建。CircleImage.swift

4.3 显示图片

使用Image(_:)初始化器将文本视图替换为 Turtle Rock 的图像，并将要显示的图像的名称传递给它。

import SwiftUI

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

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

4.4 修饰图片

添加调用以将圆形剪裁形状应用于图像。clipShape(Circle())

该Circle类型是一种形状，您可以将其用作蒙版，或者通过为圆添加笔触或填充来用作视图。

import SwiftUI

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

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

4.5 添加边框

创建另一个带有灰色笔划的圆圈，然后将其添加为叠加层，为图像提供边框。

import SwiftUI

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

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }

4.6 添加阴影

接下来，添加一个半径为 7 点的阴影。

import SwiftUI

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

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }

4.7 边框颜色

将边框颜色切换为白色。

这样就完成了图像视图。

import SwiftUI

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

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

5 使用来自其他框架的 SwiftUI 视图

接下来，您将创建一个以给定坐标为中心的地图。您可以使用MapMapKit 中的视图来渲染地图。

5.1 自定义识图

首先，您将创建一个新的自定义视图来管理您的地图。

选择 File > New > File，选择 iOS 作为平台，选择“SwiftUI View”模板，然后单击 Next。命名新文件并单击创建。MapView.swift

5.2 导入 Mapkit框架

为 增加一条import语句。MapKit

当您在同一文件中导入 SwiftUI 和某些其他框架时，您可以访问该框架提供的 SwiftUI 特定功能。

import SwiftUI
import MapKit

struct MapView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

5.3 保持变量信息

创建一个私有状态变量，用于保存地图的区域信息。

您可以使用该@State属性为应用中的数据建立真实来源，您可以从多个视图修改该数据。SwiftUI 管理底层存储并根据值自动更新视图。

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Text("Hello, World!")
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

5.4 绑定识图

使用绑定到区域Text的Map视图替换默认视图。

通过为状态变量添加前缀$，您传递了一个绑定，它就像对基础值的引用。当用户与地图交互时，地图会更新区域值以匹配用户界面中当前可见的地图部分。

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

5.5 预览效果

当预览处于静态模式时，它们仅完全呈现原生 SwiftUI 视图。对于Map视图，您需要切换到实时预览以查看它的渲染。

单击实时预览将预览切换到实时模式。您可能需要单击预览上方的“重试”或“继续”。

稍后，您将看到以 Turtle Rock 为中心的地图。您可以在实时预览中操作地图以缩小一点并查看周围区域。

6 编写详细视图

您现在拥有所需的所有组件 — 名称和地点、圆形图像和位置地图。

使用您目前使用的工具，结合您的自定义视图来创建地标详细视图的最终设计。

6.1

在项目导航器中，选择文件。ContentView.swift

import SwiftUI

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()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.2

将VStack保存三个文本视图的嵌入到另一个 中VStack。

import SwiftUI

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

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.3

将您的自定义添加到堆栈顶部。设置的尺寸与。MapViewMapViewframe(width:height:)

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

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.4

单击实时预览以在组合视图中查看渲染的地图。

您可以在显示实时预览的同时继续编辑视图。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.5

将视图添加到堆栈中。CircleImage

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            CircleImage()

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.6

要将图像视图分层放置在地图视图的顶部，请为图像垂直设置 -130 点的偏移量，并从视图底部填充 -130 点。

这些调整通过向上移动图像为文本腾出空间。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.7

在外部底部添加一个垫片，将VStack内容推送到屏幕顶部。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.8

要允许地图内容扩展到屏幕的顶部边缘，请将修改器添加到地图视图。ignoresSafeArea(edges: .top)

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.9

为地标添加分隔线和一些额外的描述性文本。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6.10

最后，将副标题字体修饰符从每个Text视图移动到HStack包含它们的视图，并将辅助颜色应用于副标题文本。

当您将修饰符应用于布局视图（如堆栈）时，SwiftUI 会将修饰符应用于组中包含的所有元素。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                    Spacer()
                    Text("California")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}