Section în SwiftUI: ce este, crearea secțiunilor și gruparea

Ce este Section în SwiftUI?

Section este o componentă structurală SwiftUI destinată grupării elementelor în interiorul containerelor Form și List. Spre deosebire de VStack sau HStack, Section adaugă spațieri sistemice, antet și subsol, precum și evidențierea vizuală a grupului sub formă de bloc cu colțuri rotunjite pe iOS.

Section nu modifică comportamentul elementelor copil — doar organizează prezentarea acestora. Toate controalele din interiorul Section — Picker, Toggle, TextField — funcționează normal, dar sunt unite vizual într-un grup logic. Acest lucru este deosebit de important pentru ecranele de formulare, unde utilizatorul trebuie să se orienteze rapid în structura datelor introduse.

Sistemul gestionează automat spațierile dintre secțiuni: distanța între Section pe iOS este de 16–20 de puncte, între elementele din interiorul Section — 0 (separator între rânduri). Dezvoltatorul nu poate modifica aceste spațieri prin modificatorii padding — ele sunt controlate de sistem pentru a asigura un aspect uniform.

Antetul și subsolul Section

Section acceptă doi parametri opționali: header — antetul grupului, și footer — textul explicativ sub grup. Antetul se afișează deasupra elementelor secțiunii cu font aldine în stil caption, subsolul — cu font mai mic și culoare gri. Ambii parametri acceptă orice SwiftUI View, nu doar Text.

Antetul Section ajută utilizatorul să înțeleagă cărei categorii aparțin elementele din interiorul grupului. De exemplu, pe ecranul de setări, anteturile „Notificări", „Confidențialitate" și „Cont" orientează imediat utilizatorul. Subsolul este potrivit pentru explicații: „Dezactivați notificările pe durata întâlnirii" sau „Parola trebuie să conțină cel puțin 8 caractere". Subsolul se împarte automat pe mai multe rânduri la nevoie.

Section(
    header: Text("Securitatea contului"),
    footer: Text("Utilizați o parolă puternică de cel puțin 8 caractere.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

În exemplu, Section are antetul „Securitatea contului" și subsolul cu sfatul de securitate a parolei. Utilizatorul vede antetul ca etichetă de secțiune, completează două câmpuri și citește imediat avertizarea de sub ele. O astfel de structură îmbunătățește UX, deoarece toate informațiile despre secțiune se află pe un singur ecran fără a fi nevoie să acceseze un ajutor separat.

Section în interiorul Form și List

Section funcționează atât în interiorul Form, cât și al List, dar reprezentarea vizuală diferă. În Form, Section se afișează ca un bloc cu colțuri rotunjite și fundal sistemic, separat de secțiunile învecinate prin spațieri. În List, Section poate folosi stilul plain — fără fundal și rotunjiri, sau inset-grouped — cu blocuri rotunjite, similar cu Form.

Alegerea containerului influențează stilul Section. Plasarea Section cu același conținut în interiorul Form și List cu stilul .insetGrouped va da același rezultat. Cu toate acestea, Form adaugă spațieri sistemice și folosește implicit stilul grouped, în timp ce List necesită specificarea explicită a stilului prin modificatorul .listStyle(.insetGrouped).

Pentru a obține același aspect în List, utilizați .listStyle(.insetGrouped). Acest stil imită aspectul Form și este potrivit pentru ecranele de setări construite pe List. Pentru liste de date standard, utilizați .plain — fără evidențierea secțiunilor, cu separatoare subțiri între rânduri.

Conținut dinamic prin ForEach

Section poate conține un număr dinamic de elemente prin ForEach. Acest lucru permite crearea de grupuri cu elemente repetitive, păstrând antetul și subsolul pentru întregul grup. ForEach în interiorul Section iterează colecția de date și creează View-uri copil pentru fiecare element, fără a afecta structura secțiunii.

Secțiunile dinamice sunt utile pentru ecranele de setări cu un număr variabil de opțiuni: lista limbilor disponibile pentru selecție, lista dispozitivelor conectate sau lista abonamentelor push. Antetul secțiunii rămâne static, iar conținutul se modifică în funcție de date.

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

    var body: some View {
        Form {
            Section(header: Text("Categorii"),
                    footer: Text("Selectați categoriile preferate")) {
                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("Selectate: \(selected.count) categorii")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

În acest exemplu, ForEach generează un Toggle pentru fiecare categorie din tabloul categories. Antetul și subsolul secțiunii sunt setate o dată și se aplică întregului grup. A doua secțiune afișează numărul de categorii selectate — nu depinde de ForEach și rămâne statică. Această abordare permite crearea de formulare flexibile în care antetul și subsolul contextualizează grupul de elemente dinamice.

Exemple de cod Section

Să examinăm un exemplu complet de ecran de profil folosind Section pentru gruparea datelor. Formularul conține trei secțiuni: informații despre utilizator, setări de confidențialitate și statistici. Fiecare secțiune își folosește propriul antet, iar ultima — subsol cu informații sumare.

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

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

            Section(header: Text("Statistici"),
                    footer: Text("Ultima actualizare azi la 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Trei Section separă clar blocurile funcționale: câmpurile editabile ale profilului, comutatoarele de confidențialitate și statisticile. A doua secțiune demonstrează validarea: Toggle „Afișează email" este dezactivat până când profilul nu devine public. Subsolul celei de-a treia secțiuni arată ora ultimei actualizări — un exemplu de utilizare a subsolului pentru informații contextuale suplimentare. LabeledContent este o componentă standard SwiftUI pentru afișarea perechii „cheie-valoare" în Form.

Section cu antet personalizat

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notificări")
            .font(.headline)
    },
    footer: Text("Gestionați notificările push și e-mail")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Acest exemplu arată că header poate fi orice SwiftUI View. Utilizarea HStack cu Image și Text permite adăugarea unei icoane lângă antet, făcând secțiunea vizual mai expresivă. Anteturile personalizate sunt utile pentru evidențierea secțiunilor importante în interfață: setări de notificări, funcții plătite sau secțiuni cu avertismente. Cu toate acestea, nu trebuie să abuzați de anteturile personalizate — 1–2 secțiuni cu aspect nestandard pe fiecare ecran sunt suficiente pentru a păstra uniformitatea interfeței.