SwiftUI 如何根据大小类在 HStack 和 VStack 之间自动切换?

13 min read

SwiftUI 提供了 .adaptive() 修饰符,可以根据屏幕大小和设备类别自动切换堆栈布局。

代码示例:

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    @Environment(\.verticalSizeClass) var verticalSizeClass
    
    var body: some View {
        Group {
            if horizontalSizeClass == .compact && verticalSizeClass == .regular {
                VStack {
                    Text("Top")
                    Text("Bottom")
                }
            } else {
                HStack {
                    Text("Left")
                    Text("Right")
                }
            }
        }.adaptive()
    }
}

在此示例中,我们使用了 @Environment 属性包装器来获取设备的水平和垂直大小类别,然后使用 Group 包装器根据大小类别切换视图。将 .adaptive() 修饰符应用于最外层堆栈,这将自动根据水平和垂直大小类别切换视图布局并进行适当的缩放和调整。