看完本文您将能够实现下面界面
SwiftUI的好处
SwiftUI的最好之处在于,对于开发人员而言,它使我们能够以闪电般的速度前进,这意味着我们可以花更多的时间考虑用户体验和事物的设计方面,并开发出更好的产品。
用户体验
Carousel轮播卡片是一种非常普遍的用户体验,几乎可以在Facebook,Instagram和SnapChat之类的每个顶级应用程序上看到。Carousel轮播卡片是卡片形状物品的水平列表,用于显示引人注目的数据。非常适合与用户交互。
那么在SwiftUI中该如何构建它们呢?
必须解决的两个问题
在构建轮播卡片时,SwiftUI存在两个核心问题:
- SwiftUI不允许对其提供的ScrollView包装器进行太多控制。因此我们需要修改ScrollView以支持捕捉。
- 如果HStack无法实现水平居中对齐。
发现的遇到这类时,开发人员通过使用UIKit来解决问题。这次我们计划通过原生SwiftUI代码解决。
第一步 计算偏移量
显然,我们不能使用内置的滚动视图并修改其行为来获得所需的结果。因此我们必须实现带有手势的自定义滚动器。但是,首先,需要修复溢出的HStack项目,并在前沿对齐第一个项目。
为此,我尝试了GeometryReader和AlignmentGuides,但无济于事。水平容器(HStack)仅支持垂直对齐。 GeometryReader不会考虑任何偏移量或间距。
很显然,HStack的x偏移量被假定为移动到一个数字,无论列表中有多少个项,该项都将使第一个项与屏幕的前沿完美对齐。唯一的坏消息是,我无法计算出这个数字。我花了几个小时才打动我。 HStack必须居中对齐。为了更好地说明我的想象,让我们看一下绘图板。