剖析 SwiftUI 布局（上）：揭开尺寸概念的神秘面纱

如今，构建令人惊叹的、高效的且美观的应用程序已经变得前所未有地容易。SwiftUI，作为构建出色用户界面的现代方式，为我们提供了更加声明式和简约的开发体验。当然，掌握 SwiftUI 离不开对布局的理解，而尺寸，无疑是布局的基础，也是我们在使用 SwiftUI 进行开发时常常会遇到的难点之一。在本文中，我们将深入探讨 SwiftUI 中尺寸的概念和用法，帮助你更轻松地构建复杂的用户界面。

SwiftUI 中的尺寸概念

在 SwiftUI 中，尺寸是一个结构体，包含两个属性：width 和 height。这两个属性都表示视图或容器的长度，单位为点（point）。点是苹果设备上的一个单位，它与像素之间的转换取决于设备的像素密度。例如，在 iPhone 8 上，1 个点等于 2 个像素，而在 iPhone 11 Pro 上，1 个点等于 3 个像素。

需要注意的是，SwiftUI 中的尺寸与UIKit中的尺寸并不相同。在 UIKit 中，尺寸是一个矩形结构体，包含 origin 和 size 两个属性，origin 属性表示矩形的原点，size 属性表示矩形的长和宽。

容器视图的尺寸

容器视图是 SwiftUI 中用于组合和排列其他视图的视图。常见的容器视图包括 HStack、VStack 和 ZStack。这些容器视图都有一个固定的尺寸，由其子视图的尺寸决定。例如，HStack 的宽度等于其子视图的总宽度，而 VStack 的高度等于其子视图的总高度。

视图几何（Geometry Reader）

视图几何是一个非常有用的视图，它允许我们访问其子视图的尺寸和位置。我们可以通过 Geometry Reader 来获取子视图的 frame，frame 是一个结构体，包含 origin 和 size 两个属性，origin 属性表示视图的原点，size 属性表示视图的长和宽。

锚点

锚点是 SwiftUI 中用于指定视图相对于其父视图的位置的点。锚点可以是视图的任何一个角、中心或边。我们可以通过 anchor(_:) 修饰符来指定锚点。例如，以下代码将视图的中心锚定在其父视图的中心：

struct MyView: View {
  var body: some View {
    Text("Hello World!")
      .anchorPreference(key: AnchorPreferenceKey.center, value: .center)
  }
}

安全区

安全区是 SwiftUI 中用于指定视图在屏幕上安全显示的区域。安全区会自动适应设备的刘海、摄像头和其他系统元素。我们可以通过 safeArea(_:) 修饰符来指定安全区。例如，以下代码将视图限制在安全区内：

struct MyView: View {
  var body: some View {
    Text("Hello World!")
      .safeArea()
  }
}

堆栈（Stack）

堆栈是 SwiftUI 中用于排列视图的视图。堆栈可以是水平的（HStack）或垂直的（VStack）。HStack 将其子视图水平排列，而 VStack 将其子视图垂直排列。我们可以通过 stack(_:alignment:spacing:) 修饰符来指定堆栈的排列方式。例如，以下代码将子视图水平排列，并设置间距为 10 点：

struct MyView: View {
  var body: some View {
    HStack(alignment: .center, spacing: 10) {
      Text("Hello")
      Text("World!")
    }
  }
}

结论

尺寸是 SwiftUI 布局的基础。了解并掌握 SwiftUI 中众多尺寸的含义与用法，可以帮助我们更轻松地构建复杂的用户界面。在本文中，我们讨论了 SwiftUI 中尺寸的概念、容器视图的尺寸、视图几何、锚点、安全区和堆栈。这些概念对于构建出色的 SwiftUI 用户界面至关重要。