SwiftUI如何适配横向ScrollView以在全设备显示固定数量完整元素

实现方法 #

核心逻辑是通过GeometryReader获取外层容器的可用宽度，按你需要的展示数量计算单个item的尺寸，修改后代码如下：

struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]
    // 自定义一屏展示的完整item数量，需要改数量直接调整这个值即可
    private let visibleItemCount: CGFloat = 4
    // 可选：自定义item之间的间距
    private let itemSpacing: CGFloat = 0

    var body: some View {
        VStack(alignment: .leading) {
            Text(categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)

            GeometryReader { proxy in
                // 总可用宽度减去所有item间距总和，再除以展示数量得到单个item宽度
                let totalSpacing = itemSpacing * (visibleItemCount - 1)
                let itemWidth = (proxy.size.width - totalSpacing) / visibleItemCount
                
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .top, spacing: itemSpacing) {
                        ForEach(items) { landmark in
                            CategoryItem(landmark: landmark)
                                .frame(width: itemWidth, height: proxy.size.height)
                        }
                    }
                }
            }
            .frame(height: 185)
        }
    }
}

补充说明 #

• 这个实现会自动适配所有设备尺寸，不管是iPhone 8还是iPhone 12甚至iPad，都会严格按照visibleItemCount的数值展示对应数量的完整item，和UIKit中sizeForItemAtIndexPath设置item宽度为collectionView.frame.size.width / 4的效果完全一致。
• 如果需要在边缘露出下一个item的部分内容引导用户滑动，只需要在计算itemWidth时额外减去你需要的露出宽度即可，比如要露出20pt，就改成let itemWidth = (proxy.size.width - totalSpacing - 20) / visibleItemCount。

内容的提问来源于stack exchange，提问作者kAiN