SwiftUI 如何使用尺寸类创建不同的布局？

17 min read

SwiftUI 中的尺寸类是指 GeometryReader 中的 .size 属性提供的尺寸。使用尺寸类可以创建不同的布局。下面是使用尺寸类创建不同布局的步骤：

  1. 创建一个 GeometryReader 视图。

  2. 在视图中使用 .size 获取视图的大小。

  3. 根据视图的大小调整布局。可以使用布局条件语句，如 if 语句或 switch 语句，从而根据视图大小选择不同的布局。

  4. 将调整后的布局添加到 GeometryReader 视图中。

下面是一个使用尺寸类创建不同布局的示例代码：

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            if geometry.size.width > geometry.size.height {
                HStack {
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(width: geometry.size.width / 2, height: geometry.size.height)
                    Rectangle()
                        .foregroundColor(.blue)
                        .frame(width: geometry.size.width / 2, height: geometry.size.height)
                }
            } else {
                VStack {
                    Rectangle()
                        .foregroundColor(.yellow)
                        .frame(width: geometry.size.width, height: geometry.size.height / 2)
                    Rectangle()
                        .foregroundColor(.green)
                        .frame(width: geometry.size.width, height: geometry.size.height / 2)
                }
            }
        }
    }
}

在这个示例中，我们使用 GeometryReader 视图来获取父视图的大小。然后，我们在 if 语句中检查视图的宽度是否大于高度。如果是，我们将创建一个水平堆栈，并在其中添加两个矩形。如果不是，我们将创建一个垂直堆栈，并在其中添加两个矩形。这是一种基于视图尺寸创建不同布局的方法。