字节笔记本
2026年2月22日
SwiftUI 教程：创建和组合视图
本教程将指导你构建 Landmarks —— 一个用于发现和分享喜爱地点的应用。你将从构建显示地标详情的视图开始。
为了布局视图，Landmarks 使用 stacks 来组合和分层图像与文本视图组件。为了向视图添加地图，你将包含一个标准的 MapKit 组件。当你优化视图设计时，Xcode 提供实时反馈，让你可以看到这些更改如何转化为代码。
创建新项目并探索画布
创建一个新的 Xcode 项目，使用 SwiftUI。探索画布、预览和 SwiftUI 模板代码。
要在 Xcode 中从画布预览和交互视图，并使用教程中描述的所有最新功能，请确保你的 Mac 运行 macOS Sonoma 或更高版本。
步骤 1: 打开 Xcode，点击 Xcode 启动窗口中的 "Create New Project"，或选择 File > New > Project。
步骤 2: 在模板选择器中，选择 iOS 作为平台，选择 App 模板，然后点击 Next。
步骤 3: 输入 "Landmarks" 作为产品名称，选择 "SwiftUI" 作为界面，"Swift" 作为语言，然后点击 Next。选择在你的 Mac 上保存 Landmarks 项目的位置。
步骤 4: 在项目导航器中，选择 LandmarksApp。
使用 SwiftUI 应用生命周期的一个应用有一个符合 App 协议的结构。该结构的 body 属性返回一个或多个场景，这些场景反过来提供要显示的内容。@main 属性标识应用的入口点。
步骤 5: 在项目导航器中，选择 ContentView。
默认情况下，SwiftUI 视图文件声明一个结构和一个预览。该结构符合 View 协议并描述视图的内容和布局。预览声明为该视图创建一个预览。
步骤 6: 画布会自动显示预览。
提示: 如果画布不可见，选择 Editor > Canvas 来显示它。
步骤 7: 在 body 属性内部，删除除 Text 声明之外的所有内容，并将 "Hello, world!" 更改为给你的问候语。
当你在视图的 body 属性中更改代码时，预览会更新以反映你的更改。
自定义文本视图
你可以通过更改代码或使用检查器来发现可用内容并帮助你编写代码，从而自定义视图的显示。
在构建 Landmarks 应用时，你可以使用任何编辑器组合：源代码编辑器、画布或检查器。无论你使用哪种工具，你的代码都会保持更新。
步骤 1: 将画布模式更改为 Selectable。
画布默认以 Live 模式显示预览，以便你可以与它们交互，但你可以使用 Selectable 模式来启用编辑。
步骤 2: 在预览中，Command-Control-单击问候语以弹出结构化编辑弹出窗口，然后选择 "Show SwiftUI Inspector"。
弹出窗口显示你可以自定义的不同属性，具体取决于你检查的类型。
步骤 3: 使用检查器将文本更改为 "Turtle Rock"，这是你在应用中显示的第一个地标的名称。
步骤 4: 将 Font 修饰符更改为 "Title"。
这将系统字体应用于文本，使其正确响应用户的首选字体大小和设置。
要自定义 SwiftUI 视图，你可以调用称为修饰符的方法。修饰符包装视图以更改其显示或其他属性。每个修饰符返回一个新视图，因此通常将多个修饰符链式连接，垂直堆叠。
步骤 5: 手动编辑代码以添加 foregroundColor(.green) 修饰符；这将文本颜色更改为绿色。
你的代码始终是视图的真相来源。当你使用检查器更改或删除修饰符时，Xcode 会立即更新你的代码以匹配。
步骤 6: 这次，通过在代码编辑器中 Control-单击 Text 声明来打开检查器，然后从弹出窗口中选择 "Show SwiftUI Inspector"。单击 Color 弹出菜单并选择 Inherited，将文本颜色更改回黑色。
步骤 7: 注意 Xcode 会自动更新你的代码以反映更改，删除 foregroundColor(.green) 修饰符。
步骤 8: 将预览设置回 Live 模式。
在 Live 模式下工作可以轻松跟踪你在源代码中进行编辑时的视图行为。
使用 Stacks 组合视图
除了你在上一节中创建的标题视图外，你还将添加文本视图来包含有关地标的详细信息，例如公园名称和所在州。
创建 SwiftUI 视图时，你在视图的 body 属性中描述其内容、布局和行为；但是，body 属性只返回单个视图。你可以在stacks中组合和嵌入多个视图，stacks 将视图水平、垂直或前后组合在一起。
在本节中，你将使用垂直 stack 将标题放置在包含公园详细信息的水平 stack 上方。
你可以使用 Xcode 将视图嵌入容器视图、打开检查器或帮助进行其他有用的更改。
步骤 1: Control-单击文本视图的初始化器以显示上下文菜单，然后选择 "Embed in VStack"。
接下来，你将通过从库中拖动 Text 视图来向 stack 添加文本视图。
步骤 2: 通过单击 Xcode 窗口右上角的加号按钮 (+) 打开库，然后将 Text 视图拖动到代码中 "Turtle Rock" 文本视图正下方的位置。
步骤 3: 将 Text 视图的占位符文本替换为 "Joshua Tree National Park"。
自定义位置以匹配所需的布局。
步骤 4: 将位置的字体设置为 subheadline。
步骤 5: 编辑 VStack 初始化器以按其前导边缘对齐视图。
默认情况下，stacks 沿其轴居中其内容并提供上下文适当的间距。
接下来，你将在位置的右侧添加另一个文本视图，用于公园所在的州。
步骤 6: 将 "Joshua Tree National Park" 文本视图嵌入到 HStack 中。
步骤 7: 在位置后添加一个新的文本视图，将占位符文本更改为公园所在的州，然后将其字体设置为 subheadline。
步骤 8: 为了指导布局使用设备的全部宽度，通过向包含两个文本视图的水平 stack 添加 Spacer 来分隔公园和州。
spacer 扩展以使其包含视图使用其父视图的所有空间，而不是仅由其内容定义其大小。
步骤 9: 最后，使用 padding() 修饰符为地标名称和详细信息的外边缘提供更多空间。
创建自定义图像视图
设置好名称和位置视图后，下一步是为地标添加图像。
你将创建一个自定义视图，将遮罩、边框和阴影应用于图像，而不是在此文件中添加更多代码。
步骤 1: 在项目文件的 Resources 文件夹中找到 turtlerock@2x.jpg；将其拖动到资源目录的编辑器中。Xcode 会为该图像创建一个新的图像集。
接下来，你将为自定义图像视图创建一个新的 SwiftUI 视图。
步骤 2: 选择 File > New > File 再次打开模板选择器。在 User Interface 部分，选择 "SwiftUI View" 并点击 Next。将文件命名为 CircleImage.swift 并点击 Create。
你已准备好插入图像并修改其显示以匹配所需的设计。
步骤 3: 使用 Image(_:) 初始化器将文本视图替换为 Turtle Rock 的图像，传递要显示的图像名称。
步骤 4: 添加对 clipShape(Circle()) 的调用以将圆形裁剪形状应用于图像。
Circle 类型是一种形状，你可以将其用作遮罩，或通过给圆形描边或填充来用作视图。
步骤 5: 创建另一个带有灰色描边的圆形，然后将其作为叠加层添加，为图像提供边框。
步骤 6: 接下来，添加一个半径为 7 点的阴影。
步骤 7: 将边框颜色切换为白色。
这完成了图像视图。
使用其他框架的 SwiftUI 视图
接下来，你将创建一个以给定坐标为中心的地图。你可以使用 MapKit 中的 Map 视图来渲染地图。
首先，你将创建一个新的自定义视图来管理你的地图。
步骤 1: 选择 File > New > File，选择 iOS 作为平台，选择 "SwiftUI View" 模板，然后点击 Next。将新文件命名为 MapView.swift 并点击 Create。
步骤 2: 为 MapKit 添加 import 语句。
当你在同一文件中导入 SwiftUI 和某些其他框架时，你可以获得该框架提供的 SwiftUI 特定功能。
步骤 3: 创建一个私有计算变量，保存地图的区域信息。
步骤 4: 将默认的 Text 视图替换为接受你用区域初始化的相机位置的 Map 视图。
步骤 5: 你将在预览中看到以 Turtle Rock 为中心的地图。
你可以在实时预览中使用 Option-单击-拖动控件操作地图以缩小一点并查看周围区域。
组合详情视图
你现在拥有了所有需要的组件 —— 名称和地点、圆形图像和位置地图。
使用你到目前为止使用的工具，组合你的自定义视图以创建地标详情视图的最终设计。
步骤 1: 在项目导航器中，选择 ContentView 文件。
步骤 2: 将包含三个文本视图的 VStack 嵌入到另一个 VStack 中。
步骤 3: 将自定义的 MapView 添加到 stack 的顶部。使用 frame(width:height:) 设置 MapView 的大小。
当你只指定 height 参数时，视图会自动调整为其内容的宽度。在这种情况下，MapView 扩展以填充可用空间。
步骤 4: 将 CircleImage 视图添加到 stack 中。
步骤 5: 为了将图像视图分层放置在地图视图之上，给图像一个垂直方向 -130 点的偏移量，以及从视图底部 -130 点的内边距。
这些调整通过将图像向上移动来为文本腾出空间。
步骤 6: 在外部 VStack 的底部添加一个 spacer，将内容推到屏幕顶部。
步骤 7: 添加一个分隔符和一些额外的描述性文本用于地标。
步骤 8: 最后，将 subheadline 字体修饰符从每个 Text 视图移动到包含它们的 HStack，并将辅助样式应用于 subheadline 文本。
当你将修饰符应用于像 stack 这样的布局视图时，SwiftUI 会将修饰符应用于组中包含的所有元素。
重要提示: 本教程不再演示当前的 SwiftUI 或 Xcode 实践。有关支持最新操作系统和工具版本的教程，请参阅 Develop in Swift。