Separando secciones de forma elegante con SwiftUI y GroupBox

Libranner Santos

14 febrero, 20242min de lectura

SwiftUI nos proporciona una serie de vistas para mostrar información de manera organizada y homogénea. Una de estas es GroupBox. Esta vista puede ser utilizada cuando queremos separar los elementos de nuestra interfaz de usuario en secciones.

Se distingue de otras vistas, como Group y Section, al ofrecer una apariencia previamente establecida por el Framework; a diferencia de Section, su comportamiento no está vinculado a otra vista principal.

Si observamos el constructor de esta vista, GroupBox.init(label:content:), podemos ver que acepta dos parámetros: label, en el cual podemos colocar la vista que servirá de cabecera, y content, en el cual podemos colocar el contenido de la sección.

Veamos un ejemplo:

import SwiftUI

struct SampleGroupBox: View {
  var body: some View {
    // 1
    GroupBox(
      // 2
      label: Label(
        "Terms and Conditions",
        systemImage: "doc.text"
      )
    ) {
      // 3
      ScrollView(.vertical, showsIndicators: true) {
        Text("**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.")
          .font(.footnote)
      }
      .frame(height: 100)
      Button("Accept Cookies") {
      }
      .buttonStyle(.borderedProminent)
    }
    .padding()
  }
}

Este código realiza lo siguiente:

1. Indicamos que queremos usar la vista GroupBox.
2. Pasamos al GroupBox un Label que servirá de cabecera con el título de la sección.
3. Indicamos las vistas que constituirán el contenido; en este caso, un ScrollView y un Button.

Es importante destacar que el parámetro label es opcional.