江南才子 发表于 2021-6-25 09:17:20

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竖屏compactregular大部分 iPhone横屏compactcompactiPhone(Max、Plus)横屏regularcompact所有 iPad横、竖屏regularregular  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 查看更多内容。

页: [1]
查看完整版本: SwiftUI 简明教程之自适应布局