2.6 创建胡同视图页面

本节，我们将针对北京几个比较有特色的胡同创建一个胡同浏览视图。在设计该视图时，我们会创建全新的用户界面，但是会用到之前所学过的各种技能。

在View文件夹中新建一个SwiftUI类型的文件，将其命名为HutongRankingView。在Model文件夹中新建一个Swift类型的文件，将其命名为HutongModel。在Data文件夹中新建一个Swift类型的文件，将其命名为HutongData。

然后，我们将HutongModel中的数据模型修改为下面的样子。

再将“项目资源/Data”中HutongData.swift中的代码全部复制到本项目的HutongData中。

一切做好以后，打开HutongRankingView文件，修改代码如下。

在Properties部分添加一个Hutong类型的常量，在Preview部分从hutongsData数组中传递一个元素。

接下来，就是修改Body部分的内容了，先添加下面这段代码。

在Body部分，我们先通过VStack容器将所有的视图组织到一个容器中。然后在里面添加一个Image，通过clipShape修饰器将其剪裁为圆形，再通过两个background修饰器为其添加两个不同颜色和尺寸的圆环。因为它最终要显示在视图的顶层，所以这里通过zIndex修饰器将其层级设置为1，并通过offset修饰器让其下移55点。

在Image的下方是一个VStack容器，该容器的zIndex被设置为0，所以会呈现在Image的下方，背景是线性的棕色渐变色，有20点的圆角。在容器的内部，先是胡同评分部分，特别说明，此处的评分没有任何依据，完全是根据界面的呈现效果设置的。

接下来，在VStack容器中添加其他内容。

在胡同评分代码的下面，我们要添加胡同标题、描述、游览时长和特点4部分代码，其中有两个地方需要设置渐变色背景，而对于其他的代码读者应该都不陌生。在预览窗口中可以看到如图2-42所示的效果。

接着，让我们为HutongRankingView添加动画效果。依旧是在Properties部分添加如下属性。

然后为Body部分顶级VStack容器添加onAppear修饰器，一旦视图出现在屏幕上，就让slideInAnimation的值为true。

因为要为Image添加纵向位移动画，所以为Image添加两个修饰器，代码如下。

这里设置Image的动画效果为easeInOut，动画时长1s，一旦slideInAnimation的值为true，Image就会从上向下移动110点。

你可以在预览窗口中启动Live模式查看动画的执行效果。

最后，让我们回到HutongView.swift文件，通过滚动视图和ForEach循环生成所有的胡同评分视图。

在Properties部分添加一个胡同信息常量，在Body部分利用ScrollView生成横向滚动视图。

我们设定ScrollView为横向滚动，其内部是一个VStack容器，容器分为、上、中下3部分，其中，上、下均为Spacer，中间则是一个HStack容器。通过这样的操作，就可以将HStack容器布局到屏幕的中间。在HStack容器中再通过ForEach循环生成胡同评分视图。

在预览窗口中启动Live模式，可以看到如图2-43所示的效果。