SwiftUI 01-创建和组合视图 (Creating and Combining Views)

本章Demo 链接
Blog 链接

简介

此示例是记录学习SwiftUI的过程，原文出自apple.com。

本示例使用SwiftUI完成一个iOS应用程序Landmarks（地标），用于发现和分享喜欢的地方。我们先构建Landmarks详情的视图。
为了方便布局view，Landmarks使用stacks来组合和分层图像和文本视图组件。我们需要基于MapKit构建地图，并将其添加到view中。修改视图的布局时，Xcode会提供实时的预览效果，我们还可以通过Xcode提供的canvas（画布）轻松的找到对应的代码，比如点击canvas上面的某个view，其对应的代码就会高亮，请看下图。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第1张图片

Snip20190608_5.png

创建项目并预览画布

使用xcode创建SwiftUI项目。浏览画布、预览和SwiftUI模板代码。
要在Xcode中预览画布上的视图并与之交互，环境依赖MacOS 10.15和Xcode 11及以上。

创建项目

1.打开Xcode，在Xcode的启动窗口中单击Create a new Xcode projec，或选择File > New > Project。
2.在模板选择器中，选择iOS作为平台，选择Single View App模板，然后单击Next。

Snip20190608_1.png
3.输入“Landmarks”作为Product Name，选择Use SwiftUI复选框，然后单击Next。选择一个位置以在Mac上保存标记项目。

Snip20190608_6.png
4.在项目导航器中，单击以选中ContentView.swift。
默认情况下，SwiftUI视图文件声明了两种结构。第一个结构符合View协议，描述了视图的内容和布局。第二个结构声明该画布视图的预览。

Snip20190608_8.png
5.在画布中，单击“Resume”以显示预览。

Snip20190608_9.png

如果你的Xcode11中找不到画布，请选择Editor > Editor and Canvas以显示它。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第6张图片

Snip20190608_10.png

6.在body属性中，将“Hello World”更改为自己的问候语。

Snip20190608_13.png

当我们更改视图的body属性中的代码时，右侧的预览画布会实时显示我们的改变。

自定义文本视图

我们可以修改代码来自定义视图的显示。
在构建Landmarks应用程序时，可以使用任何编辑器组合：代码编辑器（source editor）、画布（canvas ）或检查器（inspectors ）。无论使用哪种工具，代码都会保持更新。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第8张图片

Snip20190608_14.png

1.使用检查器（inspectors）自定义文本视图。
在预览画布中，长按Command键并单击Hello World，此时会弹出结构化编辑窗口，然后选择Inspect（检查器）。

Snip20190608_15.png

弹出窗口显示我们可以根据该控件自定义的不同属性，具体取决于自定义的view类型。

2.使用Inspect（检查器）将文本内容更改为“Turtle Rock”，即您将在应用中显示的第一个landmark的名称。
3.修改Font为Title
这将系统字体应用于文本，以便它正确响应用户的首选字体大小和设置。
4.手动编辑代码以添加.color(.blue)修饰符; 这会将文本的颜色更改为蓝色。
要自定义SwiftUI视图，请调用称为修饰符的方法。修改器包装视图以更改其显示或其他属性。每个修改器都返回一个新视图，因此链接垂直堆叠的多个修改器是很常见的。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第10张图片

Snip20190608_17.png

我们的代码始终是视图的真实来源。当使用检查器更改或删除修改器时，Xcode会立即更新我们的代码。

5.通过代码编辑器使用Inspect（检查器）修改控件的样式。
这与在预览画布上使用Inspect（检查器）的操作相同，我们将鼠标放在代码编辑器中的控件上，然后长按Command，并单击该控件，比如Text("Turtle Rock")，此时会弹出弹框，我们选择Inspect选项后，会弹出像预览画布那样操作后弹出的弹窗，在这个弹窗上面修改控件的样式即可。

Snip20190608_22.png

-6.在编辑器中，将弹出窗口中的color选项设置为Inherited，就会再次将文本颜色更改为默认的颜色黑色。
请注意，此时Xcode会自动更新代码删除颜色color(.blue)修饰符，以反映在检查器中的更改。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第12张图片

Snip20190608_23.png

使用Stacks 组合视图

上面我们这个页面添加了一个标题视图，下面我们添加一个详情描述视图，用来显示位置的。
在创建SwiftUI视图时，我们可以在视图的body属性中描述其内容、布局和行为; 但是，body属性中只能添加单个视图。如果要在body中添加多个视图，可以在Stacks，在Stacks中嵌入多个视图，Stacks允许三种布局方式：水平HStack、垂直VStack、从后到前ZStack 组合在一起。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第13张图片

546a4d34-fef9-4574-a405-d16ec83ca7fe.png

现在我们使用Stacks的垂直布局方式，将标题和详情组合在一起。

我们可以使用Xcode的代码编辑中的Inspect（检查器）在body中添加一个VStack。

1.按住Command键并单击Text("Turtle Rock")以显示结构化编辑弹出窗口，然后选择Embed in VStack。

Snip20190608_26.png
2.接下来，通过从库中拖拽Text视图到VStack视图中。
单击Xcode窗口右上角的加号按钮（+）打开库，然后在“Turtle Rock”文本视图后立即将Text视图拖到代码中的位置。

Snip20190608_29.png

3.用Joshua Tree National Park.替换文本视图的占位符文本。

根据需求自定义这个文本的字体。

将刚才添加的Text控件的的字体设置为.subheadline。
4.VStack默认是center居中对齐，编辑VStack的初始化方法，将其修改为VStack(alignment:.leading)，按前导对齐视图。

Snip20190608_30.png

接下来，我们将在该位置Text的右侧添加另一个Text视图，用来描述该公园的状态。

5.在画布上，按住Command键点击Joshua Tree National Park，然后选择Embed in HStack。此时代码会被自动同步为：

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

然后在拖拽一个Text控件到HStack中，用以显示状态的文本。

6.让布局使用设备的整个宽度，将Spacer()添加到包含两个文本视图的水平堆栈来分隔驻留和状态。

Snip20190608_32.png

spacer展开以使其包含视图使用其父视图的所有空间，而不是仅通过其内容定义其大小。

7.最后，使用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)
                    // 让 HStack 中的子控件宽度充满整个父视图
                    Spacer()
                    Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                }
        }
        // 设置间距
        .padding()
        
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

创建自定义ImageVew

上面我们添加了名称和详情文本视图，接下来要做的是为landmark添加图像。

我们将创建一个自定义视图，将遮罩，边框和阴影应用于图像，而不是在此文件中添加更多代码。

首先将图像添加到项目的Assets.xcassets中。

1.在项目文件的Resources文件夹中找到turtlerock.png; 将其拖到Assets.xcassets中。 Xcode为图像创建新的图像集。

接下来，我们将为自定义图像视图创建一个新的SwiftUI视图。

2.选择File > New > File以再次打开模板选择器在User Interface部分中，单击以选中SwiftUI View，然后单击Next。将文件命名为CircleImage.swift，然后单击Create。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第17张图片

Snip20190608_33.png

我们已准备好插入图像并修改其显示以匹配所需的设计。

3.使用Image(_:)初始化方法将默认生成的模板的body中的Text视图替换为Image("turtlerock")。

import SwiftUI

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

#if DEBUG
struct CircleImage_Previews : PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
#endif

4.调用.clipShape(Circle())方法以将ImageView裁切为圆形。
圆形类型是一种可用作蒙版的形状，或通过为圆形提供笔触或填充的视图。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第18张图片

Snip20190608_34.png

5.给圆角添加边框

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第19张图片

Snip20190608_35.png

6.接下来，添加半径为10点的阴影。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第20张图片

Snip20190608_37.png

这样就完成了图像视图。

同时使用`UIKit`和`SwiftUI`的视图

现在我们已准备好创建地图视图。可以使用MapKit中的MKMapView类来渲染地图。
要在SwiftUI中使用UIView子类，可以将其他视图包装在符合UIViewRepresentable协议的SwiftUI视图中。 SwiftUI包含WatchKit和AppKit视图的类似协议。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第21张图片

b9753927-fb44-4f74-876f-31d9126cbb16.png

首先，我们将创建一个自定义视图用于显示MKMapView。

1.选择File> New> File，选择iOS作为平台，选择SwiftUI View模板，然后单击Next。将新文件命名为MapView.swift，然后单击Create。
2.使用import关键字导入MapKit，并让MapView遵守UIViewRepresentable协议。

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello World!"/*@END_MENU_TOKEN@*/)
    }
}

#if DEBUG
struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
#endif

不要担心Xcode提示的错误; 我们将在接下来的几个步骤中解决这个问题。

UIViewRepresentable协议有两个必须要实现的方法：

    /// 创建一个要呈现的`UIView`实例。
    func makeUIView(context: Self.Context) -> Self.UIViewType

    /// 将呈现的`UIView`（和协调员）更新为最新版本
    func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)

3.实现makeUIView(context :)方法，用其替换模板中的body属性，在该方法创建并返回一个空的MKMapView。

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    
    func makeUIView(context: UIViewRepresentableContext) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
}

#if DEBUG
struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
#endif

4.创建一个updateUIView(_：context :)方法，将地图视图的区域设置为正确的坐标，并让地图控件在Turtle Rock上居中。

当预览处于静态模式时，它们仅完全呈现SwiftUI视图。因为MKMapView是一个UIView子类，所以需要切换到实时预览才能看到地图。

5.单击Live Preview（实时预览）按钮可将预览切换为实时模式。您可能需要单击预览上方的Try Again或Resume按钮。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第22张图片

Snip20190608_38.png

启动实时预览后，我们便能看到地图上的数据了。

将自定义的`MapView`添加到详情视图中

我们现在拥有了4个所需的所有组件：1.名称文本，2.地点文本，3.圆形图像，4.位置图。
使用您目前使用的工具，组合您的自定义视图以创建标志性详细视图的最终设计，下面是效果图：

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第23张图片

973ba702-85db-4852-851f-86a94cfca002.png

1.在项目导航中，选中 ContentView.swift 文件。
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)
                    // 让 HStack 中的子控件宽度充满整个父视图
                    Spacer()
                    Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                }
            }
            // 设置间距
            .padding()
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

3.在根VStack中添加刚才自定义的MapView，设置其frame的高为300。

SwiftUI 01-创建和组合视图 (Creating and Combining Views)_第24张图片

Snip20190608_39.png

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

4.单击预览画布上的Live Preview（实时预览）按钮以在组合视图中查看渲染的地图。

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

5.将自定义的CircleImage view 添加到根VStack中，并放在MapView的下面。
6.要将图像视图叠加在地图视图的顶部，请为图像提供垂直-130个点的偏移量，并从视图底部填充-130个点。

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

7.在根VStack外部的底部添加一个spacer垫片，将内容与屏幕顶部对齐。

Snip20190608_40.png

8.最后，要允许地图内容扩展到屏幕的上边缘，请将edgesIgnoringSafeArea(.top)修改器添加到地图视图中。