SwiftUI: componente Spacer

December 10, 2020

Qué es Spacer

El componente Spacer permite añadir una vista flexible sin representación visual entre los contenidos. Este componente se añade en la dirección del contenedor, comportándose de forma diferente dependiendo de si el contenedor es un VStack (ocupará todo el espacio vertical restante) o un HStack (ocupará todo el espacio horizontal restante). No tiene ninguna equivalencia con ningún componente de UIKit.

Aquí podéis consultar la documentación oficial

Su inicialización se realiza de la siguiente forma:

Spacer()

Para poder entenderlo vamos a usar el componente VStack como ejemplo. En este caso, cuando añadimos contenido al componente, este contenido se centra en la vista padre.

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sdos_office")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
            Text("La firma tecnológica sevillana SDOS instalará su nueva factoría de software en El Puerto")
                .font(.title2)
                .padding([.leading, .trailing], 10)
            Text("La consultora tecnológica SDOS ha anunciado que abrirá en El Puerto, en el polígono Las Salinas, una factoría de software. Y espera que esté operativa en el segundo semestre del año. Se trataría de un centro tecnológico...")
                .font(.subheadline)
                .padding([.leading, .trailing, .top], 10)
        }
    }
}

Si necesitáramos mostrar el contenido alineado con la parte superior de la vista, podríamos añadir un Spacer al final de todo el contenido. Este Spacer se encargará de ocupar todo el espacio en blanco restante de la pantalla, “empujando” todo el contenido hacia arriba.

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sdos_office")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
            Text("La firma tecnológica sevillana SDOS instalará su nueva factoría de software en El Puerto")
                .font(.title2)
                .padding([.leading, .trailing], 10)
            Text("La consultora tecnológica SDOS ha anunciado que abrirá en El Puerto, en el polígono Las Salinas, una factoría de software. Y espera que esté operativa en el segundo semestre del año. Se trataría de un centro tecnológico...")
                .font(.subheadline)
                .padding([.leading, .trailing, .top], 10)
            Spacer()
        }
    }
}

También podemos usarlo para añadir espacio extra entre los diferentes elementos visuales de nuestra vista:

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sdos_office")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
            Spacer()
                .frame(height: 50)
            Text("La firma tecnológica sevillana SDOS instalará su nueva factoría de software en El Puerto")
                .font(.title2)
                .padding([.leading, .trailing], 10)
            Text("La consultora tecnológica SDOS ha anunciado que abrirá en El Puerto, en el polígono Las Salinas, una factoría de software. Y espera que esté operativa en el segundo semestre del año. Se trataría de un centro tecnológico...")
                .font(.subheadline)
                .padding([.leading, .trailing, .top], 10)
            Spacer()
        }
    }
}

También podemos añadir varios Spacer para hacer una división proporcional de la pantalla. Por ejemplo, podemos añadir un nuevo Text al ejemplo anterior para que se posicione en la mitad del espacio en blanco que nos queda debajo del todo.

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sdos_office")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
            Spacer()
                .frame(height: 50)
            Text("La firma tecnológica sevillana SDOS instalará su nueva factoría de software en El Puerto")
                .font(.title2)
                .padding([.leading, .trailing], 10)
            Text("La consultora tecnológica SDOS ha anunciado que abrirá en El Puerto, en el polígono Las Salinas, una factoría de software. Y espera que esté operativa en el segundo semestre del año. Se trataría de un centro tecnológico...")
                .font(.subheadline)
                .padding([.leading, .trailing, .top], 10)
            Spacer()
            Text("Footer")
            Spacer()
        }
    }
}