看完本文您将能够实现下面界面

Jietu20200519-215316@2x.jpg

SwiftUI的好处

SwiftUI的最好之处在于，对于开发人员而言，它使我们能够以闪电般的速度前进，这意味着我们可以花更多的时间考虑用户体验和事物的设计方面，并开发出更好的产品。

用户体验

Carousel轮播卡片是一种非常普遍的用户体验，几乎可以在Facebook，Instagram和SnapChat之类的每个顶级应用程序上看到。Carousel轮播卡片是卡片形状物品的水平列表，用于显示引人注目的数据。非常适合与用户交互。
那么在SwiftUI中该如何构建它们呢？

必须解决的两个问题

在构建轮播卡片时，SwiftUI存在两个核心问题：

• SwiftUI不允许对其提供的ScrollView包装器进行太多控制。因此我们需要修改ScrollView以支持捕捉。
• 如果HStack无法实现水平居中对齐。

发现的遇到这类时，开发人员通过使用UIKit来解决问题。这次我们计划通过原生SwiftUI代码解决。

第一步 计算偏移量

显然，我们不能使用内置的滚动视图并修改其行为来获得所需的结果。因此我们必须实现带有手势的自定义滚动器。但是，首先，需要修复溢出的HStack项目，并在前沿对齐第一个项目。
为此，我尝试了GeometryReader和AlignmentGuides，但无济于事。水平容器（HStack）仅支持垂直对齐。 GeometryReader不会考虑任何偏移量或间距。
很显然，HStack的x偏移量被假定为移动到一个数字，无论列表中有多少个项，该项都将使第一个项与屏幕的前沿完美对齐。唯一的坏消息是，我无法计算出这个数字。我花了几个小时才打动我。 HStack必须居中对齐。为了更好地说明我的想象，让我们看一下绘图板。

image.png