Section in SwiftUI: cos'è, creare sezioni e raggruppare

Cos'è Section in SwiftUI?

Section è un componente strutturale di SwiftUI progettato per raggruppare elementi all'interno di contenitori Form e List. A differenza di VStack o HStack, Section aggiunge spaziatura di sistema, un'intestazione e un piè di pagina, oltre a un'evidenziazione visiva del gruppo sotto forma di blocco con angoli arrotondati su iOS.

Section non modifica il comportamento degli elementi figli — organizza solo la loro presentazione. Tutti i controlli all'interno di Section — Picker, Toggle, TextField — funzionano normalmente, ma sono visivamente combinati in un gruppo logico. Questo è particolarmente importante per i moduli sullo schermo dove l'utente deve orientarsi rapidamente nella struttura di immissione dati.

Il sistema gestisce automaticamente la spaziatura tra le sezioni: la distanza tra Section su iOS è di 16–20 punti, tra gli elementi all'interno di Section è 0 (separatore tra righe). Lo sviluppatore non può modificare queste spaziature tramite modificatori padding — sono controllate dal sistema per garantire un aspetto uniforme.

Intestazione e piè di pagina di Section

Section accetta due parametri opzionali: header — il titolo del gruppo, e footer — testo esplicativo sotto il gruppo. L'intestazione viene mostrata sopra gli elementi della sezione in grassetto con stile caption, il piè di pagina in font più piccolo in grigio. Entrambi i parametri accettano qualsiasi SwiftUI View, non solo Text.

L'intestazione di Section aiuta l'utente a capire a quale categoria appartengono gli elementi del gruppo. Ad esempio, in una schermata delle impostazioni, intestazioni come “Notifiche”, “Privacy” e “Account” orientano immediatamente l'utente. Il piè di pagina è utile per spiegazioni: “Disattiva le notifiche durante le riunioni” o “La password deve contenere almeno 8 caratteri.” Il piè di pagina va automaticamente a capo su più righe quando necessario.

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)
}

Nell'esempio, Section ha l'intestazione “Account Security” e un piè di pagina con consigli sulla sicurezza della password. L'utente vede l'intestazione come etichetta di sezione, compila due campi e legge immediatamente l'avviso sotto di essi. Questa struttura migliora l'UX perché tutte le informazioni sulla sezione sono su un unico schermo senza dover navigare verso un aiuto separato.

Section dentro Form e List

Section funziona sia dentro Form che dentro List, ma la rappresentazione visiva differisce. In Form, Section viene visualizzata come un blocco con angoli arrotondati e sfondo di sistema, separata dalle sezioni adiacenti da spaziatura. In List, Section può usare lo stile plain — senza sfondo e angoli arrotondati, o inset-grouped — con blocchi arrotondati simili a Form.

La scelta del contenitore influenza lo stile di Section. Se inserisci una Section con lo stesso contenuto in Form e List con stile .insetGrouped, il risultato sarà identico. Tuttavia, Form aggiunge spaziatura di sistema e usa lo stile grouped per impostazione predefinita, mentre List richiede la specifica esplicita dello stile tramite il modificatore .listStyle(.insetGrouped).

Per ottenere lo stesso aspetto in List, usa .listStyle(.insetGrouped). Questo stile imita l'aspetto di Form ed è adatto per schermate di impostazioni costruite su List. Per elenchi di dati standard, usa .plain — senza evidenziazione delle sezioni, con separatori sottili tra le righe.

Contenuto dinamico con ForEach

Section può contenere un numero dinamico di elementi tramite ForEach. Ciò consente di creare gruppi con elementi ripetuti mantenendo intestazione e piè di pagina per l'intero gruppo. ForEach dentro Section itera su una raccolta di dati e crea Views figlie per ogni elemento senza rompere la struttura della sezione.

Le sezioni dinamiche sono utili per schermate di impostazioni con un numero variabile di opzioni: elenco delle lingue disponibili, dispositivi connessi o abbonamenti push. L'intestazione della sezione rimane statica mentre il contenuto cambia in base ai dati.

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)
            }
        }
    }
}

In questo esempio, ForEach genera un Toggle per ogni categoria dall'array categories. L'intestazione e il piè di pagina della sezione vengono impostati una volta e si applicano all'intero gruppo. La seconda sezione mostra il numero di categorie selezionate — non dipende da ForEach e rimane statica. Questo approccio consente di creare moduli flessibili in cui intestazione e piè di pagina contestualizzano un gruppo di elementi dinamici.

Esempi di codice Section

Consideriamo un esempio completo di schermata del profilo che utilizza Section per raggruppare i dati. Il modulo contiene tre sezioni: informazioni utente, impostazioni della privacy e statistiche. Ogni sezione usa la propria intestazione e l'ultima ha un piè di pagina con informazioni di riepilogo.

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")
    }
}

Tre blocchi Section separano chiaramente le aree funzionali: campi modificabili del profilo, interruttori della privacy e statistiche. La seconda sezione dimostra la validazione: l'interruttore “Show email” è disabilitato fino a quando il profilo non è pubblico. Il piè di pagina della terza sezione mostra l'ora dell'ultimo aggiornamento — un esempio di utilizzo del piè di pagina per informazioni contestuali aggiuntive. LabeledContent è un componente standard di SwiftUI per visualizzare coppie chiave-valore in Form.

Section con intestazione personalizzata

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)
}

Questo esempio mostra che header può essere qualsiasi SwiftUI View. Usare HStack con Image e Text aggiunge un'icona accanto all'intestazione, rendendo la sezione visivamente più espressiva. Le intestazioni personalizzate sono utili per evidenziare sezioni importanti nell'interfaccia: impostazioni delle notifiche, funzionalità a pagamento o sezioni con avvisi. Tuttavia, non è consigliato abusare delle intestazioni personalizzate — 1–2 sezioni con stile non standard per schermo sono sufficienti per mantenere l'uniformità dell'interfaccia.