Section in SwiftUI: wat is het, secties maken en groeperen

Wat is Section in SwiftUI?

Section is een structurele SwiftUI-component voor het groeperen van elementen in Form- en List-containers. In tegenstelling tot VStack of HStack voegt Section systeemafstanden, een kop- en voettekst en visuele markering van de groep als een blok met afgeronde hoeken op iOS toe.

Section verandert het gedrag van onderliggende elementen niet — het organiseert alleen hun presentatie. Alle bedieningselementen in Section — Picker, Toggle, TextField — werken normaal, maar zijn visueel verenigd in een logische groep. Dit is vooral belangrijk voor formulierschermen waar de gebruiker snel de structuur van ingevoerde gegevens moet kunnen overzien.

Het systeem beheert automatisch de afstanden tussen secties: de afstand tussen Section op iOS is 16–20 punten, tussen elementen in Section — 0 (scheidingsteken tussen rijen). De ontwikkelaar kan deze afstanden niet wijzigen via padding-modifiers — ze worden door het systeem beheerd om een uniform uiterlijk te garanderen.

Kop- en voettekst van Section

Section accepteert twee optionele parameters: header — de koptekst van de groep, en footer — verklarende tekst onder de groep. De koptekst wordt boven de sectie-elementen weergegeven in vet caption-stijl lettertype, de voettekst — in kleiner lettertype in grijs. Beide parameters accepteren elke SwiftUI View, niet alleen Text.

De koptekst van Section helpt de gebruiker te begrijpen tot welke categorie de elementen in de groep behoren. Bijvoorbeeld, op het instellingenscherm oriënteren de kopteksten „Meldingen“, „Privacy“ en „Account“ de gebruiker onmiddellijk. Voettekst is geschikt voor uitleg: „Schakel meldingen uit tijdens de vergadering“ of „Wachtwoord moet minimaal 8 tekens bevatten“. De voettekst wordt indien nodig automatisch over meerdere regels verdeeld.

Section(
    header: Text("Accountbeveiliging"),
    footer: Text("Gebruik een sterk wachtwoord van minimaal 8 tekens.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

In het voorbeeld heeft Section de koptekst „Accountbeveiliging“ en een voettekst met wachtwoordbeveiligingsadvies. De gebruiker ziet de koptekst als sectielabel, vult twee velden in en leest onmiddellijk de waarschuwing eronder. Een dergelijke structuur verbetert de UX omdat alle informatie over de sectie op één scherm staat zonder dat aparte hulp nodig is.

Section in Form en List

Section werkt zowel in Form als in List, maar de visuele weergave verschilt. In Form wordt Section weergegeven als een blok met afgeronde hoeken en systeemachtergrond, gescheiden van aangrenzende secties door afstanden. In List kan Section de stijl plain — zonder achtergrond en afronding, of inset-grouped — met afgeronde blokken, vergelijkbaar met Form, gebruiken.

De keuze van de container beïnvloedt de stijl van Section. Het plaatsen van Section met dezelfde inhoud in Form en List met de stijl .insetGrouped geeft hetzelfde resultaat. Echter, Form voegt systeemafstanden toe en gebruikt standaard de grouped-stijl, terwijl List expliciete specificatie van de stijl vereist via de modifier .listStyle(.insetGrouped).

Gebruik .listStyle(.insetGrouped) om hetzelfde uiterlijk in List te krijgen. Deze stijl bootst het uiterlijk van Form na en is geschikt voor instellingenschermen die op List zijn gebouwd. Gebruik voor standaard gegevenslijsten .plain — zonder sectiemarkering, met dunne scheidingstekens tussen rijen.

Dynamische inhoud via ForEach

Section kan een dynamisch aantal elementen bevatten via ForEach. Dit maakt het mogelijk groepen te maken met herhalende elementen, terwijl de kop- en voettekst voor de hele groep behouden blijft. ForEach in Section itereert door de gegevensverzameling en maakt onderliggende Views voor elk element, zonder de sectiestructuur te verstoren.

Dynamische secties zijn nuttig voor instellingenschermen met een variabel aantal opties: lijst van beschikbare talen om te selecteren, lijst van aangesloten apparaten of lijst van push-abonnementen. De sectiekop blijft statisch, terwijl de inhoud verandert afhankelijk van de gegevens.

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

    var body: some View {
        Form {
            Section(header: Text("Categorieën"),
                    footer: Text("Selecteer uw voorkeurscategorieën")) {
                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("Geselecteerd: \(selected.count) categorieën")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

In dit voorbeeld genereert ForEach een Toggle voor elke categorie uit de array categories. De kop- en voettekst van de sectie worden eenmaal ingesteld en gelden voor de hele groep. De tweede sectie toont het aantal geselecteerde categorieën — is niet afhankelijk van ForEach en blijft statisch. Deze aanpak maakt flexibele formulieren mogelijk waarbij de kop- en voettekst de groep dynamische elementen contextualiseren.

Code voorbeelden van Section

Laten we een volledig voorbeeld van een profielscherm bekijken met Section voor het groeperen van gegevens. Het formulier bevat drie secties: gebruikersinformatie, privacy-instellingen en statistieken. Elke sectie gebruikt zijn eigen koptekst, en de laatste — een voettekst met samenvattende informatie.

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("Profielinfo")) {
                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("Statistieken"),
                    footer: Text("Laatst bijgewerkt vandaag om 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Drie Section scheiden duidelijk de functionele blokken: bewerkbare profielvelden, privacy-schakelaars en statistieken. De tweede sectie demonstreert validatie: de Toggle „Toon e-mail“ is uitgeschakeld totdat het profiel openbaar is. De voettekst van de derde sectie toont de tijd van de laatste update — een voorbeeld van het gebruik van een voettekst voor aanvullende contextuele informatie. LabeledContent is een standaard SwiftUI-component voor het weergeven van een „sleutel-waarde“-paar in Form.

Section met aangepaste koptekst

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

Dit voorbeeld laat zien dat header elke SwiftUI View kan zijn. Het gebruik van HStack met Image en Text maakt het mogelijk een pictogram naast de koptekst toe te voegen, waardoor de sectie visueel expressiever wordt. Aangepaste kopteksten zijn nuttig voor het markeren van belangrijke secties in de interface: meldingsinstellingen, betaalde functies of secties met waarschuwingen. Overdrijf echter niet met aangepaste kopteksten — 1–2 secties met een niet-standaard uiterlijk per scherm zijn voldoende om de uniformiteit van de interface te behouden.