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