如何在SwiftUI Grid中自定义设置元素间距？

问题场景 #

我创建了一个每行4个元素的SwiftUI Grid，代码如下：

Grid {
    ForEach(viewModel.rows, id: \.id) { row in
        GridRow {
            ForEach(row.users, id: \.id) { user in
                UserCellView(user: user, size: (geometry.size.width - 40) / 4)
            }
        }
    }
}

通过GeometryReader获取屏幕宽度计算cell尺寸，但当前效果对齐不佳：第一个元素左间距为0，最后一个元素右间距过宽，无法自定义网格间距。

解决方法 #

1. 利用Grid内置间距修饰符+合理计算cell尺寸

SwiftUI的Grid支持gridColumnSpacing控制列间距，配合左右padding让整体布局均匀，同时调整cell尺寸的计算公式，把间距和边距都纳入考量：

// 定义列间距常量
let columnSpacing: CGFloat = 10
// 左右边距各20，总边距40
let horizontalPadding: CGFloat = 20

Grid {
    ForEach(viewModel.rows, id: \.id) { row in
        GridRow {
            ForEach(row.users, id: \.id) { user in
                UserCellView(
                    user: user,
                    size: (geometry.size.width - horizontalPadding*2 - columnSpacing*3)/4
                )
            }
        }
    }
}
.gridColumnSpacing(columnSpacing)
.padding(.horizontal, horizontalPadding)

公式说明：总宽度减去左右边距（20*2），再减去3个列间距（4个元素有3个间隔），最后除以4得到准确的cell尺寸。

2. 设置Grid整体对齐

如果需要Grid在父容器中居中，可添加frame修饰符指定对齐方式：

Grid {
    // 原有Grid内容
}
.frame(maxWidth: .infinity, alignment: .center)
.gridColumnSpacing(10)
.padding(.horizontal, 20)

3. 确保UserCellView内部布局居中

检查UserCellView的内部布局，保证内容在cell内居中，避免局部布局偏差影响整体对齐：

struct UserCellView: View {
    let user: User
    let size: CGFloat
    
    var body: some View {
        VStack(spacing: 4) {
            Image(systemName: "person.circle")
                .resizable()
                .scaledToFit()
                .frame(width: size*0.6)
            Text(user.name)
                .font(.caption)
        }
        .frame(width: size, height: size)
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
}

内容的提问来源于stack exchange，提问作者Ramy Al Zuhouri