SwiftUI #22: Grids

Se pueden anidar Stacks tanto como sea necesario, sin embargo, para este propósito existe el componente Grid que es un contenedor que puede distribuir sus subvistas en un layout bidimensional. Si se especifica un número diferente de columnas por fila, el Grid generará columnas vacías para rellenar los espacios faltantes.

• init(alignment:horizontalspacing:verticalspacing:content:). Como el Grid se compone de GridRow, la alineación es horizontal (leading, center (por defecto) y trailing).

Las filas del Grid están definidas por la estructura GridRow

• init(alignment:horizontalSpacing:verticalSpacing:content:). El GridRow es una fila del Grid y por tanto, los componentes de su interior deben alinearse verticalmente (top, center, bottom, firstTextBaseline y lastTextBaseline).

Las vistas dentro de un GridRow pueden tener los siguientes modificadores:

• gridCellColumns(_:): Especifica el número de columnas que va a ocupar una vista dentro de un GridRow.
• gridColumnAlignment(_:): Sobrescribe la alineación horizontal de una fila. Recibe valores leading, center y trailing

En caso de que sea necesario que una celda ocupe más de dos filas, se debe anidar un Grid dentro de otro.

struct ContentView: View {

  var body: some View {
    Grid {
      GridRow {
        Image(systemName: "message")
          .frame(width: 100, height: 100)
          .background(.red)

        Image(systemName: "mic")
          .frame(width: 150, height: 120)
          .background(.red)

        Grid(verticalSpacing: 30) {
          GridRow {
            Image(systemName: "circle")
              .frame(width: 50, height: 50)
          }.background(.yellow)

          GridRow {
            Image(systemName: "circle.fill")
              .frame(width: 50, height: 50)
          }.background(.yellow)
        }
      }

      GridRow {
        Image(systemName: "phone")
          .frame(width: 200, height: 75)
          .gridCellColumns(2)

      }.background(.blue)
    }
    .font(.largeTitle)
  }
}