如何在SwiftUI中用LazyVGrid实现混合垂直布局？

核心实现方案 #

直接利用SwiftUI的LazyVGrid结合gridCellColumns修饰符，就能根据数据属性动态控制元素占据的列数，无需嵌套多个网格，灵活性拉满。

步骤1：定义数据模型 #

先修正并完善你的数据结构体（Swift要求属性必须指定类型，同时实现Identifiable方便ForEach遍历）：

struct MyObj: Identifiable {
    let id = UUID()
    let isWide: Bool
    // 可添加其他业务属性，比如title、image等
}

步骤2：准备示例数据 #

let sampleItems: [MyObj] = [
    MyObj(isWide: true),
    MyObj(isWide: false),
    MyObj(isWide: false),
    MyObj(isWide: true),
    MyObj(isWide: false),
    MyObj(isWide: false),
    MyObj(isWide: false)
]

步骤3：实现混合布局 #

struct MixedColumnGrid: View {
    let items: [MyObj]
    
    var body: some View {
        LazyVGrid(
            columns: [
                GridItem(.flexible(), spacing: 16),
                GridItem(.flexible(), spacing: 16)
            ],
            spacing: 16 // 行与行之间的间距
        ) {
            ForEach(items) { item in
                // 这里替换成你实际的业务视图
                RoundedRectangle(cornerRadius: 12)
                    .foregroundColor(.brown)
                    .frame(height: 100)
                    // 关键：根据isWide决定占据1列还是2列
                    .gridCellColumns(item.isWide ? 2 : 1)
            }
        }
        .padding(16) // 整体内边距，统一控制左右留白
    }
}

方案优势 #

1. 无需手动计算尺寸：用flexible()的GridItem会自动均分可用宽度，适配所有屏幕尺寸，避免手动计算宽度带来的适配问题。
2. 动态布局切换：通过gridCellColumns直接控制元素跨度，完全根据数据的isWide属性自动调整布局，省去嵌套网格的繁琐逻辑。
3. 扩展性强：如果后续需要支持多列或其他跨度，只需要调整GridItem数量和gridCellColumns参数即可。

额外说明 #

• 如果需要固定列宽，把GridItem(.flexible())换成GridItem(.fixed(你的宽度值))即可。
• 若数据未实现Identifiable，可以在ForEach中指定id：ForEach(items, id: \.id) { ... }（前提是MyObj有唯一标识属性）。

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