SwiftUI 基础入门教程：创建和组合视图

SwiftUI 基础入门

SwiftUI 是一种为任何 Apple 平台声明用户界面的现代方式，能够比以往更快地创建美观、动态的应用程序。

创建和组合视图

本教程将指导您构建 Landmarks 应用程序，一个用于发现和分享您喜爱的地方的应用程序。您将从构建显示地标详细信息的视图开始。

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

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

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

创建一个使用 SwiftUI 的新 Xcode 项目。探索画布、预览和 SwiftUI 模板代码。要在 Xcode 中预览画布视图并与之交互，以及使用教程中介绍的所有最新功能，请确保您的 Mac 运行的是 macOS Monterey 或更高版本。

步骤：

1. 打开 Xcode 并在 Xcode 的启动窗口中单击“创建新的 Xcode 项目”，或者选择“文件”>“新建”>“项目”。
2. 在模板选择器中，选择 iOS 作为平台，选择 App 模板，然后单击下一步。
3. 产品名称输入“Landmarks”，界面选择“SwiftUI”，语言选择“Swift”，点击下一步。选择一个位置以将 Landmarks 项目保存在您的 Mac 上。
4. 在项目导航器中，选择 LandmarksApp.swift。使用 SwiftUI 应用程序生命周期的应用程序具有符合 App 协议的结构。该结构的 body 属性返回一个或多个场景，这些场景又提供显示内容。该 @main 属性标识应用程序的入口点。
5. 在项目导航器中，选择 ContentView.swift。默认情况下，SwiftUI 视图文件声明了两个结构。第一个结构符合 View 协议并描述视图的内容和布局。第二个结构声明了该视图的预览。
6. 在画布中，单击恢复以显示预览。提示：如果画布不可见，请选择编辑器 > 画布以显示它。
7. 在 body 属性内，更改“Hello, World!” 给自己打个招呼。当您更改视图 body 属性中的代码时，预览会更新以反映您的更改。

1.2 自定义文本视图

您可以通过更改代码或使用检查器来发现可用的内容并帮助您编写代码来自定义视图的显示。在构建 Landmarks 应用程序时，您可以使用任何编辑器组合：源编辑器、画布或检查器。无论您使用哪种工具，您的代码都会保持更新。

步骤：

1. 在预览中，按住 Command 键单击问候语以调出结构化编辑弹出框，然后选择“Show SwiftUI Inspector”。弹出窗口显示您可以自定义的不同属性，具体取决于您检查的视图类型。
2. 使用检查器将文本更改为“Turtle Rock”，这是您将在应用中显示的第一个地标的名称。
3. 将字体修改器更改为“标题”。这会将系统字体应用于文本，以便它正确响应用户的首选字体大小和设置。
4. 手动编辑代码，将 padding() 修饰符改为 foregroundColor(.green) 修饰符；这会将文本的颜色更改为绿色。
5. 通过在代码编辑器中按住 Command 单击 Text 声明打开检查器，然后从弹出窗口中选择“Show SwiftUI Inspector”。单击颜色弹出菜单并选择继承以将文本颜色再次更改为黑色。
6. 请注意，Xcode 会自动更新您的代码以反映更改，移除 foregroundColor(.green) 修饰符。

1.3 使用堆栈组合视图

除了您在上一节中创建的标题视图之外，您还将添加文本视图以包含有关地标的详细信息，例如公园的名称和所在州。创建 SwiftUI 视图时，您可以在视图的 body 属性中描述其内容、布局和行为；但是，该 body 属性只返回一个视图。您可以在 stacks 中组合和嵌入多个视图，将视图水平、垂直或从后到前组合在一起。在本节中，您将使用垂直堆栈将标题置于包含公园详细信息的水平堆栈之上。

步骤：

1. 命令单击文本视图的初始化程序以显示结构化编辑弹出框，然后选择“嵌入 VStack”。
2. 通过单击 Xcode 窗口右上角的加号按钮 (+) 打开库，然后将 Text 视图拖到代码中“Turtle Rock”文本视图正下方的位置。
3. 将 Text 视图的占位符文本替换为“Joshua Tree National Park”。
4. 将位置的字体设置为 subheadline。
5. 编辑 VStack 初始化程序以使视图按其前沿对齐。默认情况下，堆栈将其内容沿其轴居中并提供适合上下文的间距。
6. 在画布中，按住 Command 单击“约书亚树国家公园”，然后选择“嵌入 HStack”。
7. 在位置之后添加一个新的文本视图，将占位符文本更改为公园的状态，然后将其字体设置为 subheadline。
8. 要引导布局使用设备的整个宽度，请通过向包含两个文本视图的水平堆栈添加一个 Spacer 来分隔公园和状态。spacer 扩展以使其包含视图使用其父视图的所有空间，而不是仅由其内容定义其大小。
9. 最后，使用 padding() 修饰符方法给地标的名称和细节多一点空间。

1.4 创建自定义图像视图

设置好名称和位置视图后，下一步是为地标添加图像。您无需在此文件中添加更多代码，而是创建一个自定义视图，将蒙版、边框和阴影应用于图像。

步骤：

1. 在项目文件的 Resources 文件夹中找到 turtlerock@2x.jpg；将其拖到资产目录的编辑器中。Xcode 为图像创建一个新的图像集。
2. 选择“文件”>“新建”>“文件”以再次打开模板选择器。在“用户界面”部分中，选择“SwiftUI View”并单击“下一步”。命名文件 CircleImage.swift 并单击创建。
3. 使用 Image(_:) 初始化器将文本视图替换为 Turtle Rock 的图像，并将要显示的图像的名称传递给它。
4. 添加调用 clipShape(Circle()) 以将圆形剪裁形状应用于图像。Circle 类型是一种形状，您可以将其用作蒙版，或通过给圆一个笔触或填充来用作视图。
5. 用灰色描边创建另一个圆圈，然后将其添加为叠加层，为图像提供边框。
6. 接下来，添加一个半径为 7 点的阴影。
7. 将边框颜色切换为白色。这样就完成了图像视图。

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

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

步骤：

1. 选择 File > New > File，选择 iOS 作为平台，选择“SwiftUI View”模板，点击 Next。命名新文件 MapView.swift 并单击创建。
2. 为 MapView.swift 导入 MapKit。当您在同一文件中导入 SwiftUI 和某些其他框架时，您可以访问该框架提供的特定于 SwiftUI 的功能。
3. 创建一个保存地图区域信息的私有状态变量。您可以使用 @State 属性为您的应用程序中的数据建立真实来源，您可以从多个视图中修改该数据来源。SwiftUI 管理底层存储并根据值自动更新视图。
4. 将默认 Text 视图替换为与区域绑定的 Map 视图。通过为状态变量添加前缀 $，您可以传递一个绑定，这就像对基础值的引用。当用户与地图交互时，地图会更新区域值以匹配当前在用户界面中可见的地图部分。
5. 单击实时预览将预览切换到实时模式。您可能需要单击预览上方的重试或继续。稍后，您会看到以 Turtle Rock 为中心的地图。您可以在实时预览中操作地图以缩小一点并查看周围区域。

1.6 编写详细视图

您现在拥有所需的所有组件 - 名称和地点、圆形图像和位置地图。使用您目前使用的工具，结合您的自定义视图来创建地标详细视图的最终设计。

步骤：

1. 在项目导航器中，选择文件 ContentView.swift。
2. 将包含三个文本视图的 VStack 嵌入另一个 VStack。
3. 将您的自定义 MapView 添加到堆栈顶部。用 frame(width:height:) 设置 MapView 大小。当您仅指定 height 参数时，视图会自动调整到其内容的宽度。在这种情况下，MapView 展开以填充可用空间。
4. 单击实时预览以在组合视图中查看渲染的地图。您可以在显示实时预览的同时继续编辑视图。
5. 将 CircleImage 视图添加到堆栈中。
6. 要将图像视图分层到地图视图顶部，请给图像垂直偏移 -130 点，并从视图底部填充 -130 点。
7. 在外部 VStack 底部添加一个间隔，将内容推送到屏幕顶部。这些调整通过向上移动图像为文本腾出空间。
8. 要允许地图内容延伸到屏幕的顶部边缘，将 ignoresSafeArea(edges: .top) 修改器添加到地图视图。
9. 为地标添加分隔线和一些额外的描述性文本。
10. 最后，将副标题字体修饰符从每个 Text 视图移动到 HStack 包含它们的视图中，并将辅助颜色应用于副标题文本。当您将修饰符应用于堆栈等布局视图时，SwiftUI 会将修饰符应用于组中包含的所有元素。