# 创建和组合视图

## 介绍

本教程将指导您构建*Landmarks* — 一款用于发现和分享您喜爱的地点的应用程序。您将首先构建显示地标详细信息的视图。

为了布局视图，Landmarks 使用*堆栈*来组合和分层图像和​​文本视图组件。要将地图添加到视图，您将包含一个标准的 MapKit 组件。当您优化视图的设计时，Xcode 会提供实时反馈，因此您可以查看这些更改如何转化为代码。

下载项目文件以开始构建此项目，并按照以下步骤操作。

项目文件：[下载](https://docs-assets.developer.apple.com/published/fb07fb61f6b05accfc283f58318f0706/10200/CreatingAndCombiningViews.zip)

## 创建一个新项目并探索画布

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

要在 Xcode 的画布中预览视图并与之交互，并使用整个教程中描述的所有最新功能，请确保您的 Mac 运行的是 macOS Big Sur 或更高版本。

#### 第1步

打开 Xcode 并在 Xcode 的启动窗口中单击“创建新的 Xcode 项目”，或选择“文件”>“新建”>“项目”。

#### 第2步

在模板选择器中，选择 iOS 作为平台，选择 App 模板，然后单击下一步。

#### 第3步

产品名称输入“Landmarks”，界面选择“SwiftUI”，生命周期选择“SwiftUI App”，点击下一步。在 Mac 上选择一个位置来保存 Landmarks 项目。

#### 第4步

在项目导航器中，选择。`LandmarksApp.swift`

使用 SwiftUI 应用程序生命周期的应用程序具有符合`App`协议的结构。该结构的`body`属性返回一个或多个场景，这些场景又提供显示内容。该`@main`属性标识应用程序的入口点。

#### 第 5 步

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

默认情况下，SwiftUI 视图文件声明两个结构。第一个结构符合`View`协议并描述视图的内容和布局。第二个结构声明该视图的预览。

#### 第 6 步

在画布中，单击“继续”以显示预览。

{% hint style="info" %}
**⬇️ 小技巧**

如果画布不可见，请选择编辑器 > 画布以显示它。
{% endhint %}

#### 第 7 步

在`body`属性中，更改“Hello, World!” 给自己打个招呼。

当您更改视图`body`属性中的代码时，预览会更新以反映您的更改。

## 自定义文本视图

您可以通过更改代码或使用检查器来发现可用内容并帮助您编写代码来自定义视图的显示。

在构建 Landmarks 应用程序时，您可以使用任何编辑器组合：源代码编辑器、画布或检查器。无论您使用哪种工具，您的代码都会保持更新。

接下来，您将使用检查器自定义文本视图。

#### 第1步

在预览中，按住 Command 键单击问候语以显示结构化编辑弹出窗口，然后选择“显示 SwiftUI Inspector”。

弹出窗口显示您可以自定义的不同属性，具体取决于您检查的视图类型。

#### 第2步

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

#### 第 3 步

将字体修改器更改为“标题”。

这会将系统字体应用于文本，以便它正确响应用户的首选字体大小和设置。

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

#### 第四步

手动编辑代码，将修改`padding()`器改为修改器；这会将文本的颜色更改为绿色。`foregroundColor(.green)` 

{% hint style="info" %}
您的代码始终是视图的真实来源。当您使用检查器更改或删除修饰符时，Xcode 会立即更新您的代码以进行匹配。
{% endhint %}

#### 第 5 步

这一次，通过 Command 键单击`Text`代码编辑器中的声明打开检查器，然后从弹出窗口中选择“Show SwiftUI Inspector”。点按“颜色”弹出式菜单并选取“继承”以再次将文本颜色更改为黑色。

#### 第 6 步

请注意，Xcode 会自动更新您的代码以反映更改，删除修饰符。`foregroundColor(.green)`