[iOS开发] SwiftUI 简明教程之自适应布局

　　本文为 Eul 样章，如果您喜欢，请移步 AppStore/Eul 查看更多内容。
　　Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、图片、代码）配合真机示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈现给读者。笔者意在尽可能使用简洁明了的语言阐述 SwiftUI & Combine 相关的知识，使读者能快速掌握并在 iOS 开发中实践。
SwiftUI 为我们提供了两个环境变量 .horizontalSizeClass 和 .verticalSizeClass，分别对应水平和竖直方向上的 Size Class，我们可以根据环境变量作出不同的布局。

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 查看更多内容。