Clever Geek Handbook

在SwiftUI中掌握网格





烟花，哈伯。在继续阅读本文之前，我想与您完全免费地分享一下我们的老师在iOS开发基础和高级课程开始前夕进行的两个非常有用的课程的录音：



  1. iOS开发快速入门
  2. 制作多线程Kotlin Multiplatform应用程序


现在让我们继续本文。





这周，我想和您谈谈Grids，这是SwiftUI中最令人期待的新功能之一。每个人都UICollectionView热切地期待着SwiftUI中的替代方案，终于在今年问世。SwiftUI为我们提供了LazyVGrid和LazyHGrid视图，可用于创建带有项目网格的布局。



基础



LazyVGrid和LazyHGrid是SwiftUI提供给我们的两个新视图类型，用于基于项目网格创建超级自定义布局。它们之间的唯一区别是填充轴。LazyVGrid垂直填充可用空间。LazyHGrid将其子级水平放置。轴是这两个视图之间的唯一区别。因此，您所了解的有关LazyVGrid的所有内容都适用于LazyHGrid，反之亦然。让我们看第一个例子。 



struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random
                    }
                }

                Section(header: Text("Section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random
                    }
                }
            }
        }
    }
}






在上面的示例中，我们创建了一个三列网格，其中每一列的固定大小为100pt。我将使用此示例来描述我们可用的所有配置选项。



  1. 该参数columns是一个数组，用于定义网格布局中的列。为了描述一列，SwiftUI为我们提供了GridItem类型。我们稍后再讨论。
  2. 参数alignment允许我们使用枚举对齐网格中的内容HorizontalAlignment为LazyVGrid和VerticalAlignment对LazyHGrid。与相同stack alignment。
  3. 该参数spacing指定LazyVGrid内的每一行之间的距离或LazyHGrid内的每一列之间的距离。
  4. 该参数pinnedViews允许您指定用于固定节页眉和页脚的选项。默认情况下为空，这意味着页眉和页脚的行为类似于内容，并且在滚动时消失。您可以启用固定页眉和页脚，在这种情况下，它们将与内容重叠并永久可见。


网格项



网格中的每一列都必须定义一个结构GridItem。该类型GridItem使我们可以指定每列的大小，对齐方式和间距。让我们看一个小例子。 



private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 16, alignment: .leading),
    GridItem(.fixed(75)),
    GridItem(.fixed(100))
]






如您所见，每列可以具有不同的大小，间距和对齐方式选项。这里最有趣的是尺寸。有三种方法可以确定网格内列的大小。它可以是固定的，灵活的或自适应的。



固定列是最明显的列。网格根据您指定的大小放置列。在前面的示例中，我们创建了一个三列布局，其中各列分别固定为50pt，75pt和100pt。



选项灵活允许您定义根据可用空间扩展或收缩的列。我们还可以提供最小和最大的灵活色谱柱尺寸。默认情况下，它使用的最小值为10pt，没有上限。 



private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]






在这里，我们创建一个布局，在两个灵活的列之间划分可用空间。第一列占据其最小大小的250pt，而第二列具有所有剩余的可用空间。



最有趣的选择是自适应。响应式选项使我们可以在单个灵活列的空间中放置多个元素。让我们尝试用一个例子弄清楚。 



private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]






如您所见，我们有两个响应列。第一列包含几个元素，其最小大小为50pt，最大为100pt。当一列中的项目数需要基于可用空间时，响应列非常有用。



网格的真正威力是当您开始混合列类型时。您可以创建一个两列布局，其中第一个是固定的，第二个是响应式的。让我们看看它的外观。 



private var columns: [GridItem] = [
    GridItem(.fixed(100)),
    GridItem(.adaptive(minimum: 50))
]






结论



网格使您可以通过混合不同类型来创建非常复杂且有趣的布局GridItem。应当注意，对网格的所有更改都可以设置动画。希望您喜欢这篇文章。随时在Twitter上关注我，并提出与该主题有关的问题。谢谢您的关注，再见！





您可以通过以下链接找到有关我们课程的更多信息：







More articles:


All Articles