SwiftUI可用空间分类Size Class

Size Class 是 SwiftUI 提供的一个工具，用于根据设备的可用空间调整布局。它将设备的可用空间分为两种简单的分类：

1、Compact（紧凑）

2、Regular（常规）

这些分类既适用于水平空间（horizontalSizeClass），也适用于垂直空间（verticalSizeClass），从而帮助我们为不同设备、方向和屏幕大小提供适配的布局。

Size Class 的主要特点

1、水平与垂直分类：

horizontalSizeClass：表示屏幕的水平空间分类。

verticalSizeClass：表示屏幕的垂直空间分类。

2、跨设备适配：

在较小的设备上（如 iPhone），通常水平和垂直空间是 compact。

在较大的设备上（如 iPad），通常垂直空间为 regular，而水平空间可能是 compact 或 regular。

3、动态响应：

当设备从竖屏旋转到横屏时，Size Class 可能会发生变化。

在多窗口和分屏模式下，Size Class 也会动态调整。

如何在 SwiftUI 中使用 Size Class

可以通过环境变量 @Environment 访问当前的 Size Class：

@Environment(\.horizontalSizeClass) var horizontalSizeClass
@Environment(\.verticalSizeClass) var verticalSizeClass

示例代码

根据 Size Class 切换布局

以下代码展示了如何在 horizontalSizeClass 为 compact 时使用垂直布局，而在其他情况下使用水平布局：

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        if horizontalSizeClass == .compact {
            VStack {
                Text("Name: John")
                Text("Age: 25")
            }
        } else {
            HStack {
                Text("Name: John")
                Text("Age: 25")
            }
        }
    }
}

iPhone Portrait (竖屏): horizontalSizeClass == .compact，视图将垂直排列。

iPad Landscape (横屏): horizontalSizeClass == .regular，视图将水平排列。

结合条件和自定义内容

可以根据水平和垂直 Size Class 动态改变布局内容：

struct AdaptiveView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    @Environment(\.verticalSizeClass) var verticalSizeClass

    var body: some View {
        Group {
            if horizontalSizeClass == .compact && verticalSizeClass == .regular {
                Text("This is an iPhone in Portrait Mode")
            } else if horizontalSizeClass == .regular && verticalSizeClass == .regular {
                Text("This is an iPad in any Mode")
            } else {
                Text("Other Device or Orientation")
            }
        }
        .padding()
    }
}

截图为iPhone 15 pro max横屏

Size Class 分类总结

所有纵向 iPhone 都具有紧凑的宽度和常规的高度。

大多数横向显示的 iPhone 都有紧凑的宽度和紧凑的高度。

大型 iPhone（Plus 尺寸和 Max 设备）在横向显示时具有常规宽度和紧凑高度。

当应用程序以全屏方式运行时，两种方向的所有 iPad 都具有常规宽度和常规高度。

使用 Size Class 的场景

1、自适应布局：根据设备方向和大小切换布局，例如从 VStack 到 HStack。

2、优化用户体验：在小屏设备上隐藏次要内容，在大屏设备上显示完整内容。

3、支持分屏模式：特别是在 iPad 上，分屏模式可能影响布局。

4、动态调整内容：通过检测 Size Class，动态改变显示的文字或图片。

ViewThatFits 替代方案

如果需要更灵活地根据设备大小调整布局，可以使用 ViewThatFits。它会尝试不同的布局，直到找到适合当前设备空间的内容：

ViewThatFits {
    HStack {
        Text("This is a horizontal layout")
    }

    VStack {
        Text("This is a vertical layout")
    }
}

ViewThatFits 是 Size Class 的补充工具，可以在布局调整中简化代码逻辑。

总结

Size Class 是一个简单而强大的工具，帮助开发者根据屏幕大小和方向提供响应式布局。

通过 @Environment 可以轻松访问当前的 horizontalSizeClass 和 verticalSizeClass。