Section en SwiftUI: qué es, crear secciones y agrupar

¿Qué es Section en SwiftUI?

Section es un componente estructural de SwiftUI diseñado para agrupar elementos dentro de contenedores Form y List. A diferencia de VStack o HStack, Section añade espaciado del sistema, un encabezado y pie, así como un resalte visual del grupo en forma de bloque con esquinas redondeadas en iOS.

Section no cambia el comportamiento de los elementos secundarios — solo organiza su presentación. Todos los controles dentro de Section — Picker, Toggle, TextField — funcionan normalmente, pero se combinan visualmente en un grupo lógico. Esto es especialmente importante para formularios en pantalla donde el usuario debe orientarse rápidamente en la estructura de datos.

El sistema gestiona automáticamente los espacios entre secciones: la distancia entre Section en iOS es de 16–20 puntos, entre elementos dentro de Section es 0 (separador entre filas). El desarrollador no puede cambiar estos espacios mediante modificadores de padding — están controlados por el sistema para garantizar una apariencia uniforme.

Encabezado y pie de Section

Section acepta dos parámetros opcionales: header — el título del grupo, y footer — texto explicativo debajo del grupo. El encabezado se muestra sobre los elementos de la sección en negrita con estilo de caption, el pie en fuente más pequeña con color gris. Ambos parámetros aceptan cualquier SwiftUI View, no solo Text.

El encabezado de Section ayuda al usuario a entender a qué categoría pertenecen los elementos del grupo. Por ejemplo, en una pantalla de configuración, encabezados como “Notificaciones”, “Privacidad” y “Cuenta” orientan al usuario al instante. El pie es útil para explicaciones: “Desactive las notificaciones durante reuniones” o “La contraseña debe tener al menos 8 caracteres.” El pie se ajusta automáticamente a varias líneas cuando es necesario.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

En el ejemplo, Section tiene el encabezado “Account Security” y un pie con consejos de seguridad de contraseña. El usuario ve el encabezado como etiqueta de sección, completa dos campos y lee inmediatamente la advertencia debajo. Esta estructura mejora la UX porque toda la información sobre la sección está en una sola pantalla sin necesidad de ir a una ayuda separada.

Section dentro de Form y List

Section funciona tanto dentro de Form como de List, pero la representación visual difiere. En Form, Section se muestra como un bloque con esquinas redondeadas y fondo del sistema, separado de secciones adyacentes por espacios. En List, Section puede usar el estilo plain — sin fondo ni esquinas redondeadas, o inset-grouped — con bloques redondeados similares a Form.

La elección del contenedor afecta el estilo de Section. Si colocas una Section con el mismo contenido dentro de Form y List con estilo .insetGrouped, el resultado será idéntico. Sin embargo, Form añade espaciado del sistema y usa estilo grouped por defecto, mientras que List requiere especificación explícita del estilo mediante el modificador .listStyle(.insetGrouped).

Para lograr la misma apariencia en List, usa .listStyle(.insetGrouped). Este estilo imita la apariencia de Form y es adecuado para pantallas de configuración construidas sobre List. Para listas de datos estándar, usa .plain — sin resalte de secciones, con separadores finos entre filas.

Contenido dinámico con ForEach

Section puede contener una cantidad dinámica de elementos mediante ForEach. Esto permite crear grupos con elementos repetidos manteniendo el encabezado y pie para todo el grupo. ForEach dentro de Section itera sobre una colección de datos y crea Views secundarias para cada elemento sin romper la estructura de la sección.

Las secciones dinámicas son útiles para pantallas de configuración con un número variable de opciones: lista de idiomas disponibles, dispositivos conectados o suscripciones push. El encabezado de la sección permanece estático mientras el contenido cambia según los datos.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

En este ejemplo, ForEach genera un Toggle para cada categoría del array categories. El encabezado y pie de la sección se definen una vez y se aplican a todo el grupo. La segunda sección muestra el número de categorías seleccionadas — no depende de ForEach y permanece estática. Este enfoque permite crear formularios flexibles donde el encabezado y pie contextualizan un grupo de elementos dinámicos.

Ejemplos de código de Section

Veamos un ejemplo completo de pantalla de perfil usando Section para agrupar datos. El formulario contiene tres secciones: información del usuario, configuración de privacidad y estadísticas. Cada sección usa su propio encabezado, y la última tiene un pie con información resumida.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Tres bloques Section separan claramente las áreas funcionales: campos editables del perfil, interruptores de privacidad y estadísticas. La segunda sección demuestra validación: el interruptor “Show email” está desactivado hasta que el perfil sea público. El pie de la tercera sección muestra la hora de la última actualización — un ejemplo de uso del pie para información contextual adicional. LabeledContent es un componente estándar de SwiftUI para mostrar pares clave-valor en Form.

Section con encabezado personalizado

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Este ejemplo muestra que header puede ser cualquier SwiftUI View. Usar HStack con Image y Text añade un icono junto al encabezado, haciendo la sección visualmente más expresiva. Los encabezados personalizados son útiles para resaltar secciones importantes en la interfaz: configuración de notificaciones, funciones de pago o secciones con advertencias. Sin embargo, no se recomienda abusar de encabezados personalizados — 1–2 secciones con estilo no estándar por pantalla es suficiente para mantener la uniformidad de la interfaz.