实战需求
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<Content> 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<Content> where Content : View
总览
此视图将灵活的首选大小返回到其父布局。
