SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度 （教程含源码）

实战需求

SwiftUI教程之ScrollView和多个LazyVGrid 组合实现自动适应宽度

本文价值与收获

看完本文后，您将能够作出下面的界面

截屏2020-11-14 上午8.37.56.png

Jietu20201114-083832.gif

看完本文您将掌握的技能

• GeometryReader
• LazyVGrid
• .sectionHeaders
• Section
• ScrollView(.horizontal)
• Array(repeating: GridItem(.flexible(minimum: 100, maximum: maxwidth)

---

基础知识

LazyVGrid

一种容器视图，它在垂直增长的网格中排列其子视图，仅在需要时创建项。

struct LazyVGrid where Content : View

使用教程

grid网格组件是惰性的，因为网格视图在需要它们之前不会创建项目。

在以下示例中，ScrollView包含一个LazyVGrid，该LazyVGrid由垂直排列的Text视图网格组成，并与滚动视图的顶部对齐。 对于网格中的每一列，最上一行显示“ Smileys”组中的Unicode代码点，最下一行显示其对应的表情符号。

 var columns: [GridItem] =
         Array(repeating: .init(.flexible()), count: 2)
 ScrollView {
     LazyVGrid(columns: columns) {
         ForEach((0...79), id: \.self) {
             let codepoint = $0 + 0x1f600
             let codepointString = String(format: "%02X", codepoint)
             Text("\(codepointString)")
             let emoji = String(Character(UnicodeScalar(codepoint)!))
             Text("\(emoji)")
         }
     }.font(.largeTitle)
 }

---

GeometryReader

一个容器视图，根据其自身大小和坐标空间定义其内容。

@frozen struct GeometryReader where Content : View

总览
此视图将灵活的首选大小返回到其父布局。

---

实战代码