GirdView的简单使用，附效果图

最近笔者公司有可能用到swiftUI去进行开发，因为提前进行学习。过程中会把学习中demo代码发到博客。
也是为了做个笔记，也希望能帮到大家在实际中应用

struct GridBootcamp: View {
    let colums: [GridItem] = [
        //        GridItem(.adaptive(minimum: 50, maximum: .infinity), spacing:  nil , alignment: nil),
        GridItem(.flexible(), spacing:  nil , alignment: nil),
        GridItem(.flexible(), spacing:  nil , alignment: nil),
        GridItem(.flexible(), spacing:  nil , alignment: nil),
    ]
    var body: some View {
        
        
        ScrollView{
            LazyVGrid(columns: colums,
                      alignment: .center,
                      spacing: 6,
                      /// 固定header
                      pinnedViews: [.sectionHeaders],
                      content: {
                
                Section(header: Text("section 1")
                    .foregroundStyle(.yellow)
                    .font(.title)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.green)
                ) {
                    ForEach(0..<10) { index in
                        Rectangle().frame(height: 150)
                            .foregroundStyle(Color.orange)
                    }
                }
                
                Section(header: Text("section 2")
                    .foregroundStyle(.yellow)
                    .font(.title)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.green)
                ) {
                    ForEach(0..<19) { index in
                        Rectangle().frame(height: 150)
                            .foregroundStyle(Color.pink)
                    }
                }
                
                
            }).padding()
        }
        
        
    }
    
    
}

#Preview {
    GridBootcamp()
}

GirdView是Apple给SwiftUI设计一个用来处理瀑布流的组件，代码中把其设计成一个section。 如果只是需要一个GirdView 那么使用这部分就可以

 LazyVGrid(columns: colums,
                      alignment: .center,
                      spacing: 6,
                      /// 固定header
                      pinnedViews: [.sectionHeaders],
                      content: {
                    ForEach(0..<10) { index in
                        Rectangle().frame(height: 150)
                            .foregroundStyle(Color.orange)
                    }
            })

在VGird，前面加上Lazy是为了懒加载里面内容，避免离屏渲染。

下面是代码块一的效果图：

完结🌹