本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容，
Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、圖片、代碼）配合真機示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈現給讀者，筆者意在盡可能使用簡潔明了的語言闡述 SwiftUI & Combine 相關的知識，使讀者能快速掌握并在 iOS 開發中實踐，
SwiftUI 為我們提供了兩個環境變數.horizontalSizeClass和.verticalSizeClass，分別對應水平和豎直方向上的 Size Class，我們可以根據環境變數作出不同的布局，
關于 Size Class，可以參考 Adaptivity and Layout 中的內容，
我總結了一下 Size Class，大致如下表所示：
| 設備 | 橫/豎屏 | 寬 | 高 |
|---|---|---|---|
| 所有 iPhone | 豎屏 | compact | regular |
| 大部分 iPhone | 橫屏 | compact | compact |
| iPhone（Max、Plus） | 橫屏 | regular | compact |
| 所有 iPad | 橫、豎屏 | regular | regular |
SwiftUI 中，我們可以通過 @Environment 來獲取當前的 Size Class，如下代碼所示，當 horizontalSizeClass 為 compact 時，我們使用 VStack 來布局，反之，我們使用 HStack 來布局，
如果你手上現在拿的正是 Max 或 Plus 系列的 iPhone，可以試著旋轉螢屏，可以看到示例的不同布局效果，
struct AppleProductView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass
let products = [
("Mac", "desktopcomputer"),
("iPhone", "iphone"),
("Airpods", "airpodspro")
]
var body: some View {
if horizontalSizeClass == .compact {
VStack {
ForEach(products, id:\.0) { v in
product(v)
}
}
} else {
HStack {
ForEach(products, id:\.0) { v in
product(v)
}
}
}
}
func product(_ item: (String, String)) -> some View {
Label(item.0, systemImage: item.1)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(8)
}
}
iOS 開發，獨立作品： ① Eul：SwiftUI & Combine 簡明教程 ② FontsX：在任意 app 輸入特殊字體 詳情請戳： https://apps.apple.com/cn/developer/ke-zeng/id1322330151本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/308626.html
標籤：iOS