使用 UI 控件 #

在 Landmarks app 中，用户可以创建个人简介来展示自己。为了让用户能修改个人简介，我们需要添加一个编辑模式，并设计一个偏好设置界面。

请先下载本节资源文件，并按照下面的步骤进行。

• 预计完成时间：25 分钟
• 资源文件：下载

1. 显示用户简介 #

Landmarks app 在本地保存一些详细配置和偏好设置。在用户编辑他们的简介前，会在一个没有修改控件的摘要视图中显示出来。

第 1 步 #

首先在 Model 目录中创建一个名为 Profile.swift 的 Swift File 文件，并在其中定义一个用户配置文件。

第 2 步 #

接下来，在 Views 目录下创建一个名为 Profiles 的子目录，然后在里面创建一个新文件 ProfileHost.swift，该视图为文本视图，显示存储的配置文件的用户名。

ProfileHost 视图负责用户信息的静态摘要视图以及编辑模式

第 3 步 #

在 Profiles 目录中创建一个名为 ProfileSummary 的新视图，该视图拥有一个 Profile 实例并显示一些基本用户信息。

ProfileSummary 持有一个 Profile 值要比一个简介的绑定更合适，因为它的父视图 ProfileHost 负责管理它的 state。

第 4 步 #

更新 ProfileHost 来显示简介视图

第 5 步 #

创建一个新视图 HikeBadge ，这个视图组合了 绘制路径和形状 中的徽章以及一些徒步的描述文本。

徽章只是一个图形，因此 HikeBadge 中的文本以及 accessibility(label:) 修饰符让徽章对其他用户来说含义更加清晰。

注意：两个调用 frame(width:height:) 的修饰符让徽章以 300 × 300 点的设计尺寸进行缩放渲染。

第 6 步 #

更新 ProfileSummary，给它添加几个具有不同色调的徽章以及获得徽章的原因。

第 7 步 #

引入 动画视图与转场 中的 HikeView 来完成 ProfileSummary。

第 8 步 #

在 CategoryHome.swift 中，使用 toolbar 修饰符在导航条上添加一个用户资料按钮，当用户点击它时，显示 ProfileHost 视图。

第 9 步 #

添加 listStyle 修饰符，选择一个更适合内容的列表样式。

第 10 步 #

切换到实时预览，并尝试点击个人简介按钮来查看个人信息。