编写详情视图 #

现在我们完成了所需的所有组件：名称、地点、圆形图片和地图。

使用目前的工具，将这些组件组合起来变成符合最终设计的详情视图。

第 1 步 #

选择 ContentView.swift 文件。

第 2 步 #

将之前包含三个文本视图的 VStack 嵌入另一个新的 VStack 中。

第 3 步 #

将自定义的 MapView 添加到 stack 顶部。用 frame(width:height:) 方法设置 MapView 的大小。

当只指定高度参数时，视图会自动调整其内容的宽度。在这里，MapView 会展开并填充所有可用空间。

第 4 步 #

开启实时预览，就能在视图中看到渲染的地图。

我们可以在实时预览的同时继续编辑视图。

第 5 步 #

将 CircleImage 视图添加到 stack 中。

第 6 步 #

为了将图片视图盖在地图视图上面，我们需要给图片设置 -130 点的偏移量，并从底部填充 -130 点。

图片向上移动后，就为文本腾出了空间。

第 7 步 #

在最外层的 VStack 底部添加一个 spacer，将内容推到屏幕顶端。

第 8 步 #

为了让地图内容延伸到屏幕的顶部边缘，在地图视图中添加 ignoresSafeArea(edges: .top) 修饰符。

第 9 步 #

为地标添加一个分隔线和一些额外的描述性文字。

第 10 步 #

最后，将 HStack 中文本的修饰符，统一转移到 HStack 上，并加上颜色

课后问答 #