Como usar Size Classes en SwiftUI

Las size classes son compatibles de forma nativa con SwiftUI, que las expone para que podamos leerlas en el entorno. Úsalas creando primero un objeto @Environment que contendrá su valor, luego buscando la clase de tamaño .compact o .regular y comprobando el valor de esa propiedad cuando sea necesario.

Por ejemplo:

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

    var body: some View {
        if horizontalSizeClass == .compact {
            Text("Compact")
        } else {
            Text("Regular")
        }
    }
}

Al utilizar VStack o HStack para su contenido, las size classes son una excelente manera de que sus interfaces de usuario se ajusten inteligentemente al espacio disponible.

Por ejemplo, puedes organizar los elementos horizontalmente si dispone de mucho espacio, pero si no lo tiene, optará por una disposición vertical.

Usando el property wrapper @Environment, SwiftUI ofrece un método práctico para leer los valores guardados en la estructura EnvironmentValues.

Por ejemplo, al proporcionar la ruta de la clave verticalSizeClass, podemos recuperar la clase de tamaño vertical de la interfaz de usuario. Según el tipo y la orientación del dispositivo, el valor de tipo UserInterfaceSizeClass almacenado en esta propiedad indica a nuestra vista cuánto espacio vertical está disponible. Al considerar variables como si el dispositivo está en modo vertical u horizontal y si el tamaño de la pantalla es de un iPhone, iPad u otro, SwiftUI determina automáticamente este valor.

Por ejemplo:

struct ContentView: View {
    @Environment(\.verticalSizeClass)
    private var verticalSizeClass
    
    var body: some View {
        VStack {
            Text("Hello Developers!")
                .font(.largeTitle)
             if verticalSizeClass == .regular {
            Text("Developers")
                .font(.system(size: 30))
                .fontWeight(.heavy)
            Image("developers")
        }
        
        if verticalSizeClass == .compact {
            Text("SwiftUI Apps")
                .font(.system(size: 30))
                .fontWeight(.heavy)
            Image("apps")
                .resizable()
                .scaledToFit()
        }
        }
        .padding()
    }
}

En este ejemplo, comprobamos la clase de tamaño vertical y horizontal para determinar si la vista tiene suficiente espacio vertical para mostrar una imagen u otra según la posición del dispositivo. Si la clase de tamaño es regular, el texto “Developers” aparecerá, mientras que si es en tamaño compact, aparecerá el texto “SwiftUI Apps”.