Section i SwiftUI: vad är det, skapa sektioner och gruppering

Vad är Section i SwiftUI?

Section är en strukturell SwiftUI-komponent avsedd för gruppering av element i Form- och List-containrar. Till skillnad från VStack eller HStack lägger Section till systemavstånd, rubrik och sidfot, samt visuell markering av gruppen som ett block med rundade hörn på iOS.

Section ändrar inte underordnade elements beteende — den organiserar endast deras presentation. Alla kontroller i Section — Picker, Toggle, TextField — fungerar normalt men är visuellt sammanfogade i en logisk grupp. Detta är särskilt viktigt för formulärskärmar där användaren snabbt måste navigera i strukturen av inmatade data.

Systemet hanterar automatiskt avstånden mellan sektioner: avståndet mellan Section på iOS är 16–20 punkter, mellan element i Section — 0 (avskiljare mellan rader). Utvecklaren kan inte ändra dessa avstånd genom padding-modifierare — de styrs av systemet för att säkerställa ett enhetligt utseende.

Rubrik och sidfot för Section

Section accepterar två valfria parametrar: header — gruppens rubrik, och footer — förklarande text under gruppen. Rubriken visas ovanför sektionens element med fet caption-stil typsnitt, sidfoten — med mindre typsnitt i grått. Båda parametrarna accepterar vilken SwiftUI View som helst, inte bara Text.

Section-rubriken hjälper användaren att förstå vilken kategori elementen i gruppen tillhör. Till exempel, på inställningsskärmen orienterar rubrikerna „Meddelanden“, „Integritet“ och „Konto“ användaren omedelbart. Sidfot är lämplig för förklaringar: „Stäng av meddelanden under mötet“ eller „Lösenordet måste innehålla minst 8 tecken“. Sidfoten delas automatiskt upp på flera rader vid behov.

Section(
    header: Text("Kontosäkerhet"),
    footer: Text("Använd ett starkt lösenord med minst 8 tecken.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

I exemplet har Section rubriken „Kontosäkerhet“ och en sidfot med lösenordssäkerhetsråd. Användaren ser rubriken som sektionsetikett, fyller i två fält och läser omedelbart varningen under dem. En sådan struktur förbättrar UX eftersom all information om sektionen finns på en skärm utan att separat hjälp behövs.

Section inuti Form och List

Section fungerar både i Form och List, men den visuella representationen skiljer sig åt. I Form visas Section som ett block med rundade hörn och systembakgrund, separerad från intilliggande sektioner med avstånd. I List kan Section använda plain-stil — utan bakgrund och rundning, eller inset-grouped — med rundade block, liknande Form.

Valet av container påverkar stilen på Section. Att placera Section med samma innehåll i Form och List med .insetGrouped-stil ger samma resultat. Form lägger dock till systemavstånd och använder som standard grouped-stil, medan List kräver explicit angivelse av stil genom modifieraren .listStyle(.insetGrouped).

För att uppnå samma utseende i List, använd .listStyle(.insetGrouped). Denna stil imiterar utseendet av Form och passar för inställningsskärmar byggda på List. För standarddatalistor, använd .plain — utan sektionsmarkering, med tunna avskiljare mellan rader.

Dynamiskt innehåll via ForEach

Section kan innehålla ett dynamiskt antal element via ForEach. Detta möjliggör skapande av grupper med upprepade element, medan rubriken och sidfoten behålls för hela gruppen. ForEach i Section itererar genom datasamlingen och skapar underordnade Views för varje element utan att störa sektionsstrukturen.

Dynamiska sektioner är användbara för inställningsskärmar med varierande antal alternativ: lista över tillgängliga språk att välja, lista över anslutna enheter eller lista över push-prenumerationer. Sektionsrubriken förblir statisk medan innehåll förändras beroende på data.

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

    var body: some View {
        Form {
            Section(header: Text("Kategorier"),
                    footer: Text("Välj dina önskade kategorier")) {
                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("Valda: \(selected.count) kategorier")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

I detta exempel genererar ForEach en Toggle för varje kategori från arrayen categories. Sektionens rubrik och sidfot ställs in en gång och gäller för hela gruppen. Den andra sektionen visar antalet valda kategorier — är inte beroende av ForEach och förblir statisk. Detta tillvägagångssätt möjliggör flexibla formulär där rubrik och sidfot kontextualiserar gruppen av dynamiska element.

Kodexempel för Section

Låt oss titta på ett komplett exempel på en profilsida med Section för att gruppera data. Formuläret innehåller tre sektioner: användarinformation, integritetsinställningar och statistik. Varje sektion använder sin egen rubrik, och den sista — en sidfot med sammanfattande information.

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("Profilinfo")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

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

            Section(header: Text("Statistik"),
                    footer: Text("Senast uppdaterad idag kl 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Tre Section separerar tydligt funktionella block: redigerbara profilfält, integritetsomkopplare och statistik. Den andra sektionen demonstrerar validering: Toggle „Visa e-post“ är avstängd tills profilen blir offentlig. Den tredje sektionens sidfot visar tiden för senaste uppdatering — ett exempel på användning av sidfot för ytterligare kontextuell information. LabeledContent är en standard SwiftUI-komponent för att visa ett „nyckel-värde”-par i Form.

Section med anpassad rubrik

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

Detta exempel visar att header kan vara vilken SwiftUI View som helst. Användning av HStack med Image och Text möjliggör att lägga till en ikon bredvid rubriken, vilket gör sektionen visuellt mer uttrycksfull. Anpassade rubriker är användbara för att markera viktiga sektioner i gränssnittet: notisinställningar, betalfunktioner eller sektioner med varningar. Överdriv dock inte med anpassade rubriker — 1–2 sektioner med icke-standard utseende per skärm räcker för att bevara gränssnittets enhetlighet.