如何实现SwiftUI LazyVGrid多列布局（大尺寸项对齐双小项）

你的问题出在使用了.adaptive类型的GridItem，同时手动设置视图宽度，这会打破网格的自动对齐逻辑。正确的做法是使用固定列宽的GridItem，并通过gridColumnSpan让大项占据两列，这样就能保证布局对齐。

修改后的代码 #

struct ContentView: View {
    let paddingLeft: CGFloat = 22.0
    
    var body: some View {
        let widgetWidth: CGFloat = 72.0
        let widgetHeight: CGFloat = widgetWidth
        let totalColumns = 4
        // 计算列之间的间隙
        let totalAvailableWidth = UIScreen.main.bounds.width - paddingLeft * 2
        let totalWidgetWidth = widgetWidth * CGFloat(totalColumns)
        let widgetGap: CGFloat = floor((totalAvailableWidth - totalWidgetWidth) / CGFloat(totalColumns - 1))
        
        // 定义4个固定宽度的列，间距为widgetGap
        let columns = Array(repeating: GridItem(.fixed(widgetWidth), spacing: widgetGap), count: totalColumns)
        
        LazyVGrid(columns: columns, spacing: widgetGap) {
            ForEach(0 ..< 11) { idx in
                RoundedRectangle(cornerRadius: 5)
                    .foregroundColor(Color(hue: 0.1 * Double(idx), saturation: 1, brightness: 1))
                    .frame(height: widgetHeight)
                    // 指定当前项占据的列数：第5个项（idx=4）占2列，其余占1列
                    .gridColumnSpan(idx == 4 ? 2 : 1)
            }
        }
        .padding(.horizontal, paddingLeft)
    }
}

关键修改点 #

1. 替换GridItem类型：将.adaptive改为.fixed(widgetWidth)，并生成4个固定列，确保每列宽度严格一致。
2. 使用gridColumnSpan替代手动设置宽度：通过gridColumnSpan(2)让目标项自动占据两列，系统会自动计算其宽度为2*widgetWidth + widgetGap，完美匹配两个小项的总宽度，保证对齐。
3. 移除手动width设置：不再需要手动指定视图宽度，网格会根据列数和跨度自动分配正确的尺寸。

这样修改后，大项会和同一行的两个小项完全对齐，符合你的预期布局。

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