地标类别视图显示一个垂直滚动的地标列表，每个地标可以水平滚动。随着你构建这个视图并将其连接到现有的视图，你将探索如何通过组合视图来适应不同的设备尺寸和方向。

请按照步骤构建此项目，或下载已完成的项目以自行探索。

第 1 节

添加一个类别视图 您可以通过创建一个按类别排序地标并突出显示视图顶部的特色地标的方式来提供一种不同的浏览地标的方式。

步骤 1

在项目中的视图组中创建一个类别组，并将一个名为 CategoryHome 的自定义视图添加到新的组中。

第 2 步

添加一个 NavigationSplitView 来容纳不同的类别。

您可以使用导航拆分视图以及 NavigationLink 实例和相关的修饰符来构建应用程序中的层次导航结构。

第 3 步

将导航栏的标题设置为特色。

该视图在顶部展示一个或多个特色地标。

第 2 节

创建分类列表 分类视图以垂直列的形式在单独的行中显示所有类别，以便于浏览。您可以通过结合垂直和水平堆叠，并为列表添加滚动来实现这一点。

从 landmarkData.json 文件中读取类别数据。

步骤 1

在 Landmark 中，添加一个 Category 枚举和一个 category 属性到 Landmark 结构中。

landmarkData 文件已经为每个地标包括了一个具有三个字符串值之一的 category 值。通过匹配数据文件中的名称，你可以依赖结构的 Codable 兼容性来加载数据。

第 2 步

在 ModelData 中，添加一个计算得到的 categories 字典，以类别名称作为键，并为每个键添加一个关联地标数组。

第 3 步

在 CategoryHome 中，创建一个 modelData 属性。

您现在需要访问类别，稍后还需要访问其他地标数据。

第 4 步

使用 List 在 Landmarks 中显示类别。

Landmark.Category 案例名称标识列表中的每个项目，因为它是一个枚举，因此在其他类别中必须是唯一的。

第三部分

创建一个类别行 Landmarks 每个类别以一行的形式水平滚动显示。添加一个新的视图类型来表示这一行，然后在新的视图中显示该类别的所有地标。

在创建和组合视图中创建的 Landmark 视图中重用部分视图，以创建地标的标准预览。

步骤 1

为一行的内容定义一个新的自定义视图 CategoryRow 。

第 2 步

为该类别的名称和该类别中的项目列表添加属性。

第 3 步

显示类别的名称。

第 4 步

将类别的项目放在 HStack 中，并将该类别名称与这些项目组合成一个 VStack 。

第 5 步

通过指定一个高 frame(width:height:) ，添加填充，并将 HStack 包含在一个滚动视图中，为内容留出一些空间。

使用更大的数据样本更新视图预览，使其更容易确保滚动行为是正确的。

第 6 步

创建一个新的自定义视图 CategoryItem ，用于显示一个地标。

第 7 步

在 CategoryRow 中，用新的 CategoryItem 视图替换用于显示地标名称的 Text 。

第 4 节

完成分类视图 在分类首页添加行和特色图片。

步骤 1

更新 CategoryHome 的主体，以将类别信息传递给行类型的实例。

接下来，您将在视图顶部添加一个特色地标。您需要从地标数据中获取更多信息才能完成此操作。

第 2 步

在 Landmark 中，添加一个新的 isFeatured 属性。

就像您添加的其他地标属性一样，这个布尔值已经在数据中存在——您只需要声明一个新的属性即可。

第 3 步

在 ModelData 中，添加一个新的计算得出的 features 数组，该数组仅包含 isFeatured 设置为 true 的地标。

第 4 步

在 CategoryHome 中，将第一个特色地标的照片添加到列表顶部。

你将在后续教程中将此视图转换为一个交互式轮播图。目前，它显示一个特色地标，并带有缩放和裁剪的预览图。

第 5 步

将所有类型的地标预览的内容间距设置为零，以便内容可以延伸到显示区域的边缘。

第 5 节

在各部分之间添加导航 在视图中可以看到所有不同分类的地标，用户需要一种方法来访问应用程序中的每个部分。使用导航和呈现 API，使类别首页、详细视图和收藏列表可以从标签视图中导航。

步骤 1

在 CategoryRow 中，用 CategoryItem 包裹现有的 NavigationLink 。

分类项本身是按钮的标签，其目的地是代表卡片的地标详情视图。

固定预览以便可以看到下一步对 CategoryRow 的影响。

第 2 步

通过应用 renderingMode(😃 和 foregroundStyle(😃 修饰符更改分类项的导航外观。

通过环境的强调色渲染的导航链接标签，以及图片可能会渲染为模板图片。您可以根据设计需求修改这两种行为。

接下来，您将修改应用程序的主要内容视图，以显示一个标签视图，让用户可以选择刚刚创建的类别视图或现有的地标列表。

第 3 步

解锁预览，切换到 ContentView ，并添加要显示的标签列表。

第 4 步

为标签选择添加一个状态变量，并给它一个默认值。

第 5 步

创建一个选项卡视图，包含 LandmarkList 以及新的 CategoryHome 。

每个视图上的 tag(_😃 修改器与 selection 属性可以采取的可能值之一匹配，这样 TabView 就可以协调在用户界面中用户做出选择时显示哪个视图。

第 6 步

为每个选项卡添加一个标签。

第 7 步

确保启用实时预览并尝试新的导航。