如何在SwiftUI中实现特定网格布局？

不用纠结LazyVStack+ZStack的组合，SwiftUI原生的LazyVGrid是实现这类网格布局的最优选择，能轻松支持单元格跨列/跨行、自适应尺寸等需求。以下是针对你需求的实现代码：

核心实现代码 #

import SwiftUI

// 网格数据模型
struct GridItemModel: Identifiable {
    let id = UUID()
    let title: String
    let spansTwoColumns: Bool // 标记是否占两列
    let backgroundColor: Color
}

struct CustomGrid: View {
    // 模拟测试数据
    private let gridItems: [GridItemModel] = [
        GridItemModel(title: "项1", spansTwoColumns: false, backgroundColor: .red),
        GridItemModel(title: "项2", spansTwoColumns: true, backgroundColor: .blue),
        GridItemModel(title: "项3", spansTwoColumns: false, backgroundColor: .green),
        GridItemModel(title: "项4", spansTwoColumns: false, backgroundColor: .orange),
        GridItemModel(title: "项5", spansTwoColumns: true, backgroundColor: .purple),
        GridItemModel(title: "项6", spansTwoColumns: false, backgroundColor: .pink),
        GridItemModel(title: "项7", spansTwoColumns: false, backgroundColor: .teal)
    ]
    
    // 定义网格列配置：两列自适应宽度，列间距16
    private let columns: [GridItem] = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach(gridItems) { item in
                    GridCellView(item: item)
                        // 让标记为跨列的单元格占据两列
                        .gridCellColumns(item.spansTwoColumns ? 2 : 1)
                }
            }
            .padding(.horizontal, 16)
        }
    }
}

// 单个网格单元格视图
struct GridCellView: View {
    let item: GridItemModel
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 12)
                .fill(item.backgroundColor)
            Text(item.title)
                .foregroundColor(.white)
                .font(.headline)
        }
        .frame(height: 160) // 可根据需求调整固定高度，或改为动态高度
    }
}

// 预览
struct CustomGrid_Previews: PreviewProvider {
    static var previews: some View {
        CustomGrid()
    }
}

关键说明 #

• LazyVGrid优势：原生支持网格布局逻辑，无需手动用ZStack定位元素，避免布局混乱
• 列配置：GridItem(.flexible())让列宽自适应父容器，也可替换为.fixed(CGFloat)设置固定列宽，或.adaptive(minimum:)自动适配屏幕宽度生成多列
• 跨列控制：通过gridCellColumns(_:) modifier直接指定单元格占据的列数，实现图中错落的布局效果
• 间距设置：LazyVGrid的spacing参数控制行间距，GridItem的spacing参数控制列间距，可按需调整

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