SwiftUI #18: Stacks

Las vistas pueden alinearse de forma horizontal, vertical o una-sobre-otra.

VStack

El VStack toma el ancho más grande de sus hijos y la altura es la suma de las alturas de sus hijos.

Por defecto las vistas de un VStack están alineadas al centro, pero eso se cambia con el argumento alignment de tipo HorizontalAlignment, que puede tomar los valores center, leading y trailing.

Ejemplo

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hola")
      Text("Mundo")
    }
  }
}

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Hola")
      Text("Mundo")
    }
  }
}

Se puede especificar la separación entre hijos del stack con el parámetro spacing:

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 50) {
      Text("Hola")
      Text("Mundo")
    }
  }
}

ViewBuilder

El contenido (Content) del stack está anotado con un @ViewBuilder, lo que permite escribir una vista después de otra, y el compilador se encargará de presentarlos en pantalla en el mismo orden.

HStack

Las vistas se declaran una después de otra, dentro del bloque Content y luego se pintan en pantalla de forma horizontal.

struct ContentView: View {
  var body: some View {
    HStack(alignment: .top, spacing: 20) {
      Image(systemName: "pencil")
        .font(.system(size: 30))
      Text("Mundo")
    }
  }
}

La altura del HStack está determinada por la altura más grande de sus hijos. El ancho está determinado por la suma de los anchos de los hijos.

Las vistas están alineadas por defecto en el centro aunque, para cambiar la alineación, se debe hacer a través del argumento VerticalAlignment que puede ser top, center (por defecto), bottom, firstTextBaseline, lastTextBaseline.

struct ContentView: View {
  var body: some View {
    VStack(spacing: 30) {
      row(alignment: .top, text: "Top")
      row(alignment: .center, text: "Center")
      row(alignment: .bottom, text: "Bottom")
      row(alignment: .firstTextBaseline, text: "First Text Baseline")
      row(alignment: .lastTextBaseline, text: "Last Text Baseline")
    }
  }

  private func row(alignment: VerticalAlignment, text: String) -> some View {
    HStack(alignment: alignment, spacing: 0) {
      Color.red.frame(height: 1)
      Text(text).font(.title).border(.gray)
      Color.red.frame(height: 1)
    }
  }
}

ZStack

ZStack sirve para poner vistas una sobre otra.

struct ContentView: View {
  var body: some View {
    ZStack(alignment: .center) {
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
        .foregroundStyle(.red)
    }
  }
}

zIndex

Las vistas aparecen una sobre otra, en el orden en que fueron escritas en el código. Sin embargo, esto se puede cambiar con el modificador zIndex(_:) que sirve para modificar el orden de aparición de las vistas sobre el eje Z.

Por defecto, todas las vistas tienen índice 0. Sin embargo, las vistas se pintan en orden ascendente de este índice: primero las de zIndex menor y al final las de zIndex mayor.

struct ContentView: View {
  var body: some View {
    ZStack(alignment: .center) {
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
        .foregroundStyle(.red)
        .zIndex(-1)
    }
  }
}

Modificando el estilo de las subvistas de un Stack

Se puede aplicar un modificador de estilo al Stack, lo que provoca que los cambios se apliquen a las vistas hijas. Por ejemplo:

struct ContentView: View {
  var body: some View {
    ZStack(alignment: .center) {
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
    }
    .foregroundStyle(.red)
  }
}

Agregar espacio de relleno entre hijos de un Stack

Se puede agregar un espacio entre dos vistas con un tamaño mínimo, permitiendo al contenido del Stack tomar todo el tamaño ofrecido por el contenedor (el Stack). Para ello se usa el componente Spacer. El sistema calcula el tamaño para los componentes discretos y luego asigna el tamaño restante a los Spacer contenidos.

Se puede poner un Spacer a cualquier lado de una vista. Dejar un Spacer a un costado puede mover el contenido hacia un extremo. Poner un Spacer entre dos vistas puede separarlas y dejar un espacio en la mitad.

struct ContentView: View {
  var body: some View {
    HStack(alignment: .center) {
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Spacer()
      Text("Medellin")
        .font(.body.bold())
    }
  }
}