本文為 Eul 樣章，如果您喜歡，請移步 [ApUIpStore/EuUI(https://apps.apple.com/cn/app/eul/id1541991958) 查看更多內容，
Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、圖片、代碼）配合真機示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈現給讀者，筆者意在盡可能使用簡潔明了的語言闡述 SwiftUI & Combine 相關的知識，使讀者能快速掌握并在 iOS 開發中實踐，
Stack 相關的內容較為簡單，這里不做講解，這一節我們一起來熟悉 SwiftUI 中的 LazyHGrid 和 LazyVGrid，
GridItem
LazyHGrid 和 LazyVGrid 可以快速構建類似 CollectionView 的視圖，其核心要點就是通過 GridItem 進行動態布局，
每一個 GridItem 實體都對應格子視圖中的某一行或列，并為之配置對齊方式 alignment、與下一個 GridItem 實體的間距 spacing，以及尺寸 size，
注意：
size在 LazyHStack 中約束的是每個 item 的高度，其寬度默認是自適應的，除非我們指定具體值，在 LazyVStack 中則相反，它約束的是每個 item 的寬度，我們可以這樣理解，LazyHStack 的視圖在水平方向上的堆疊的，它需要在有限的高度范圍內向水平方向上填充，所以需要在有限的高度范圍內約束每個 item 的高度，LazyVStack 也可以作同樣的理解，只是方向不同罷了，
這里的 size 是一個列舉型別：
public enum Size {
// 一個使用指定尺寸的專案
case fixed(CGFloat)
// 一個靈活的專案，可以指定最小或最大尺寸，默認最小尺寸為 10，最大為無限大
case flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity)
// 在可用的空間內生成盡可能多的自適應尺寸的專案，可以指定最小或最大尺寸
case adaptive(minimum: CGFloat, maximum: CGFloat = .infinity)
}
我們先了解這么多，下面結合具體實體理解，
LazyHGrid、LazyVGrid
我們先在要展示的 View 中添加如下屬性：
// 天氣，后面會據此生成隨機資料
private let weathers = ["sun.max", "moon", "cloud.drizzle", "snow", "wind.snow"]
// 6 種不同的布局樣式
private let rowStyles = ["adaptive", "fixed", "flexible", "mix1", "mix2", "mix3"]
// 選中的布局樣式
@State private var styleSelection: Int = 0
// 依次對應 `rowStyles` 以及示例中的 6 種不同的布局樣式
private let rows = [
// 自適應尺寸，最小高度為 60，根據視圖的尺寸生成盡可能多的 item
[GridItem(.adaptive(minimum: 60))],
// 三行，每行固定 item 高度為 80
Array(repeating: GridItem(.fixed(80)), count: 3),
// 三行，因 .flexible 默認最最大高度為無限大，所以會撐滿視圖
Array(repeating: GridItem(.flexible(minimum: 60)), count: 3),
// 第一行固定高度為 100，后面的 item 最小高度為 50，生成盡可能多的 item
[GridItem(.fixed(100)), GridItem(.adaptive(minimum: 50))],
// 第一行固定高度為 80，第二行因為是 .flexible，所以會撐滿剩余空間
[GridItem(.fixed(80)), GridItem(.flexible(minimum: 60))],
// 第一行固定高度為 120，第二行雖然是 .flexible，并不會撐滿視圖，因為后面還有 .adaptive, 其最小高度為 40，它的優先級最高，所以第二行的高度為 80
[GridItem(.fixed(120)), GridItem(.flexible(maximum: 80)), GridItem(.adaptive(minimum: 40))]
]
styleSelection 和 Picker 配合使用，可以切換選中的布局樣式，關于 Picker 的使用，請參照前面的小節視圖與互動/選擇器的內容，
生成不同布局樣式的主要代碼：
ScrollView(.horizontal) {
LazyHGrid(rows: rows[styleSelection]) {
ForEach(0..<999) { i in
Image(systemName: weathers[i % weathers.count])
.font(.title)
.frame(minWidth: 40, maxHeight: .infinity)
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(8)
}
}
}
.frame(maxHeight: .infinity)
最后就會生成示例所示的界面，請讀者自行參照上文以及注釋理解，
LazyVGrid 與 LazyHGrid 類似，不再贅述，下面是 LazyVGrid 的布局樣式代碼，與示例所示是一致的，供參考：
private let columns = [
[GridItem(.adaptive(minimum: 60))],
Array(repeating: GridItem(.fixed(80)), count: 3),
Array(repeating: GridItem(.flexible(minimum: 60)), count: 3),
[GridItem(.fixed(100)), GridItem(.adaptive(minimum: 50))],
[GridItem(.fixed(80)), GridItem(.flexible(minimum: 60))],
[GridItem(.fixed(120)), GridItem(.flexible(maximum: 80)), GridItem(.adaptive(minimum: 40))]
]
本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/286166.html
標籤：其他