【SwiftUI基础篇】4 LazyVGrid垂直栅格与LazyHGrid水平栅格

前面有介绍过LazyHStack、LazyVStack，Lazy 意味着子视图会在即将出现在屏幕上的时候再被渲染。而 Grid 的布局主要通过传入一个 [GridItem] 类型的 columns 参数控制，GridItem 的种类在下面的注释中有讲解。

LazyVGrid与LazyHGrid为我们提供了相当多的灵活性的网格布局。最简单的网格由三部分组成：原始数据，GridItem描述所需布局的数组以及将数据和布局组合在一起的LazyVGrid或 LazyHGrid。

一、LazyVGrid 垂直栅格布局

LazyVGrid 相比VStack 更为自由的垂直栅格布局。是一个垂直增长的网格中排列子视图的容器视图，Lazy的修饰意味子视图会在即将出现在屏幕上的时候再被渲染。

使用GridItem(.adaptive(minimum: 60))意味着我们希望网格每行尽可能地容纳尽可能多的项目，每个网格的最小大小为60点。

//定义删格显示格式
let columns: [GridItem] = [
    GridItem(.fixed(50)),
    GridItem(.flexible(minimum: 50, maximum: 120)),
    GridItem(.adaptive(minimum: 60, maximum: 80))
]
//应用columns格式
LazyVGrid(columns: columns) {
    ForEach(0..<1000) { i in
        ZStack {
        RoundedRectangle(cornerRadius: 10)
            .foregroundColor(.blue)
            Text("(i)")
                .font(.largeTitle)
                
        }
            .frame(height: 100)
    }
}

GridItem 用来控制具体的横向布局方式，具体来说，是每一行的高度是多少（因为高度可以无限延伸）目前有 3 种 GridItem，fixed, flexible 和 .adaptive

1、 fixed: 表示这行的高度固定为传入的参数

2、 flexible: 一个在一定范围内灵活地取一个高度，默认的最小值为 10，最大值为 .infinity

3、 adaptive: 类似于 flexible，用 adaptive 表示的行的高度可以在指定的范围内灵活地变动。区别在于当 adaptive 会尽可能地表示为多行，从而把空间占满，而 flexible 只会表示一行。

在进行布局的时候，会先防止 fixed 类型的行，然后将剩余空间平分给 flexible 和 adaptive，adaptive会根据空间转为多行。当空间不足的时候，会优先摆放 fixed，其次为 flexible，再其次为 adaptive。

// 用 GridItem 中的 spacing 参数控制列间距等
let columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 10),
    GridItem(.fixed(100), spacing: 30),
    GridItem(.fixed(200), spacing: 60)]
//放入滚动视图里
ScrollView {
    LazyVGrid(columns: columns, spacing: 40,pinnedViews: [.sectionHeaders]) {
        Section(header: Text("头部标注")) {
            ForEach(0..<30) { i in
                  RoundedRectangle(cornerRadius: 0)
                        .foregroundColor(.blue)
                        .frame(height: 100)
            }
        }
    }
}

pinnedViews 可以让头注或脚注在滚动过程中保持在其位置上而 spacing 用于控制行间距。

正如你所看到的，所需要的代码来创建水平和垂直网格几乎是一样的，只是改变rows为columns。

GridItem是对单个网格项(如行或列)的描述。您可以使用GridItem实例来配置LazyHGrid和LazyVGrid视图中的项目布局。每个网格项指定布局属性，如间距和对齐，网格视图使用这些属性来确定给定列或行中所有项的大小和位置。所以利用好GridItem是栅格布局的重点。

二、LazyHGrid 水平栅格布局

LazyHGrid是一个在水平增长的网格中排列子视图的容器视图，子视图只在需要时创建项。用法和上面的垂直差不多。只是布局方向改变了。

上面LazyVGrid的参数columns(列)而在LazyHGrid改为了rows(行)，这正是布局的方向发生成了改变导致的。

//滚动改为了横向的
ScrollView(.horizontal, showsIndicators: true) {
    LazyHGrid(rows: [GridItem(.fixed(50)),
                     GridItem(.flexible(minimum: 100, maximum: 200)),
                     GridItem(.adaptive(minimum: 300, maximum: 400))]) {
        ForEach(0..<100) { i in
            RoundedRectangle(cornerRadius: 0)
                .foregroundColor(.blue)
                .frame(width: 100)
        }
    }
}

共用参数解释：

1、case fixed(CGFloat)  指定行、列的单个项目的大小。

2、case flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity) 是一个设置范围内自适应大小，可以在固定视图里灵活摆放子项目的数量。

3、case adaptive(minimum: CGFloat, maximum: CGFloat = .infinity) 在单个灵活项的空间中包含多个项。这种大小情况将一个或多个项目放置到分配给单个灵活项目的空间中，使用提供的边界和间距来确定具体适合多少个项目。这种方法倾向于插入尽可能多的最小大小的项，但允许它们增加到最大大小。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/118