Grid 的使用

1. 方式一，常见的几种方式

  1.1 实现

//----------1----------//
// adaptive 方式
let columns2: [GridItem] = [
    // .adaptive 自适应控制 , 间距, 对齐
    GridItem(.adaptive(minimum: 10, maximum: 300), spacing: nil, alignment: nil),
    GridItem(.adaptive(minimum: 150, maximum: 300), spacing: nil, alignment: nil),
    GridItem(.adaptive(minimum: 10, maximum: 300), spacing: nil, alignment: nil),
]

// flexible 方式
let columns1: [GridItem] = [
    // .flexible 填充满屏幕大小 , 间距, 对齐
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
]

// fixed 方式
let columns: [GridItem] = [
    // .fixed 多宽, 间距, 对齐
    GridItem(.fixed(50), spacing: nil, alignment: nil),
    GridItem(.fixed(75), spacing: nil, alignment: nil),
    GridItem(.fixed(100), spacing: nil, alignment: nil),
    GridItem(.fixed(75), spacing: nil, alignment: nil),
    GridItem(.fixed(50), spacing: nil, alignment: nil),
]

// 第一种方式
func testLazyVGrid1() -> some View{
    // 懒加载垂直网格视图
    LazyVGrid(columns: columns) {
        ForEach(0..<50) { index in
            Rectangle()
                .frame(height: 50)
        }
    }
}

  1.2 效果图:

2. 方式二，常用的方式

  2.1 实现

//----------2----------//
let columns3: [GridItem] = [
    // .flexible 填充满屏幕大小 , 间距, 对齐
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
    GridItem(.flexible(), spacing: nil, alignment: nil),
]

// 第二种方式
func testLazyVGrid2()-> some View{
    ScrollView{
        Rectangle()
            .fill(Color.white)
            .frame(height: 400)
        
        LazyVGrid(columns: columns3) {
            ForEach(1..<50) { index in
                Rectangle()
                    .frame(height: 150)
            }
        }
    }
}

  2.2 效果图:

3. 方式三，带有固定页眉

  3.1 实现

//----------3----------/
let columns4: [GridItem] = [
    // .flexible 填充满屏幕大小 , 间距, 对齐
    GridItem(.flexible(), spacing: 6, alignment: nil),
    GridItem(.flexible(), spacing: 6, alignment: nil),
    GridItem(.flexible(), spacing: 6, alignment: nil),
]

// 第三种方式
func testLazyVGrid3()-> some View{
    ScrollView{
        Rectangle()
            .fill(Color.orange)
            .frame(height: 400)
        
        LazyVGrid(
            columns: columns4,
            alignment: .center,
            spacing: 6,
            pinnedViews: [.sectionHeaders]) {
            // 页眉
            Section {
                ForEach(1..<50) { index in
                    // 矩形
                    Rectangle()
                        .frame(height: 150)
                }
            } header: {
                Text("Section 1")
                    .foregroundColor(.white)
                    .font(.title)
                    .frame(maxWidth: .infinity,  alignment: .leading)
                    .background(Color.blue)
                    .padding()
            }
            // 页眉
            Section {
                ForEach(1..<50) { index in
                    // 矩形
                    Rectangle()
                        .fill(Color.green)
                        .frame(height: 150)
                }
            } header: {
                Text("Section 2")
                    .foregroundColor(.white)
                    .font(.title)
                    .frame(maxWidth: .infinity,  alignment: .leading)
                    .background(Color.red)
                    .padding()
            }
        }
    }
}

  3.2 效果图: