SwiftUI 簡明教程之自適應布局

本文為 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)
  }
}

本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容。