SwiftUI中如何为可滚动HStack设置均等首尾边距与元素间距

不要将水平边距直接添加到ForEach层级——该操作会给每个循环生成的单元格都添加上边距，导致相邻单元格之间叠加上双倍边距，破坏间距一致性。

通用兼容方案（支持所有iOS版本） #

将边距添加到HStack外层，设置边距值与HStack的spacing值完全相等即可。边距只会作用在HStack的首尾两端，不会影响内部单元格之间的间距。

struct ContentView: View {
    // 统一管理间距值，保证三处间距完全一致，修改时仅需调整这一处
    private let gap: CGFloat = 5
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: gap) {
                ForEach(0...1, id: \.self) { _ in
                    Capsule(style: .circular)
                        .fill(.red)
                        .frame(width: 250, height: 40)
                }
            }
            .padding(.horizontal, gap) // 关键：给整组HStack添加水平边距
        }
    }
}

最终实现的间距完全相等：

• 第一个单元格前缘到滚动视图边缘距离 = gap
• 相邻单元格之间的间距 = gap
• 最后一个单元格后缘到滚动视图边缘距离 = gap

注：原代码中使用background(Color.red)会让颜色超出胶囊形状的边界，替换为fill(.red)才会让颜色完全贴合胶囊形状。

iOS 17+ 原生优化方案 #

如果项目不需要兼容iOS 17以下系统，推荐使用ScrollView自带的contentMargins修饰符设置滚动内容边距，滚动指示器会自动适配边距位置，更符合系统交互规范：

struct ContentView: View {
    private let gap: CGFloat = 5
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: gap) {
                ForEach(0...1, id: \.self) { _ in
                    Capsule(style: .circular)
                        .fill(.red)
                        .frame(width: 250, height: 40)
                }
            }
        }
        .contentMargins(.horizontal, gap, for: .scrollContent)
    }
}

原始未加边距的效果参考：

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