Section a SwiftUI-ban: mi ez, szekció létrehozása és csoportosítás

Mi az a Section a SwiftUI-ban?

A Section egy strukturális SwiftUI komponens, amely az elemek csoportosítására szolgál a Form és List konténereken belül. A VStack-től vagy HStack-től eltérően a Section rendszer távolságokat, fej- és láblécet, valamint a csoport vizuális kiemelését adja hozzá lekerekített sarkokkal rendelkező blokk formájában iOS-en.

A Section nem változtatja meg a gyermek elemek viselkedését — csak a megjelenítésüket szervezi. A Section belsejében lévő összes vezérlő — Picker, Toggle, TextField — normálisan működik, de vizuálisan egy logikai csoportba egyesül. Ez különösen fontos az űrlap képernyőkön, ahol a felhasználónak gyorsan kell navigálnia a bevitt adatok struktúrájában.

A rendszer automatikusan kezeli a szekciók közötti távolságokat: a Section-ök közötti távolság iOS-en 16–20 pont, a Sectionön belüli elemek között — 0 (elválasztó a sorok között). A fejlesztő nem változtathatja meg ezeket a távolságokat padding módosítókon keresztül — azokat a rendszer vezérli az egységes megjelenés biztosítása érdekében.

Section fejléce és lábléce

A Section két opcionális paramétert fogad el: header — a csoport fejléce, és footer — magyarázó szöveg a csoport alatt. A fejléc a szekció elemei felett jelenik meg félkövér caption stílusú betűtípussal, a lábléc — kisebb betűtípussal szürke színben. Mindkét paraméter bármilyen SwiftUI View-t elfogad, nem csak Text-et.

A Section fejléce segít a felhasználónak megérteni, hogy a csoporton belüli elemek melyik kategóriába tartoznak. Például a beállítások képernyőn az „Értesítések“, „Adatvédelem“ és „Fiók“ fejlécek azonnal tájékoztatják a felhasználót. Lábléc alkalmas magyarázatokra: „Kapcsolja ki az értesítéseket a találkozó idejére“ vagy „A jelszónak legalább 8 karaktert kell tartalmaznia“. A lábléc szükség esetén automatikusan több sorra törik.

Section(
    header: Text("Fiók biztonsága"),
    footer: Text("Használjon erős jelszót, amely legalább 8 karakterből áll.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

A példában a Section „Fiók biztonsága“ fejléccel és jelszó biztonsági tanácsot tartalmazó lábléccel rendelkezik. A felhasználó a fejlécet szekció címkeként látja, kitölt két mezőt, és azonnal elolvassa az alattuk lévő figyelmeztetést. Egy ilyen struktúra javítja az UX-t, mivel a szekcióval kapcsolatos összes információ egy képernyőn található, anélkül hogy külön súgóra lenne szükség.

Section a Form és List belsejében

A Section mind a Form, mind a List belsejében működik, de a vizuális megjelenítés eltérő. A Form-ban a Section egy blokként jelenik meg lekerekített sarkokkal és rendszer háttérrel, elválasztva a szomszédos szekcióktól távolságokkal. A List-ben a Section használhat plain stílust — háttér és lekerekítés nélkül, vagy inset-grouped — lekerekített blokkokkal, hasonlóan a Form-hoz.

A konténer kiválasztása befolyásolja a Section stílusát. Ugyanazon tartalommal rendelkező Section elhelyezése a Form és .insetGrouped stílusú List belsejében azonos eredményt ad. Azonban a Form rendszer távolságokat ad hozzá és alapértelmezés szerint grouped stílust használ, míg a List a stílus explicit megadását igényli a .listStyle(.insetGrouped) módosítón keresztül.

A List-ben azonos megjelenés eléréséhez használja a .listStyle(.insetGrouped) beállítást. Ez a stílus utánozza a Form megjelenését, és alkalmas a List-re épített beállítási képernyőkhöz. Szabványos adatlistákhoz használja a .plain beállítást — szekciók kiemelése nélkül, vékony elválasztókkal a sorok között.

Dinamikus tartalom ForEach segítségével

A Section dinamikus számú elemet tartalmazhat a ForEach segítségével. Ez lehetővé teszi ismétlődő elemekkel rendelkező csoportok létrehozását, miközben a fejléc és lábléc az egész csoport számára megmarad. A Sectionön belüli ForEach végigiterál az adatgyűjteményen, és gyermek View-kat hoz létre minden elemhez, anélkül hogy megsértené a szekció struktúráját.

A dinamikus szekciók hasznosak a változó számú opcióval rendelkező beállítási képernyőkön: elérhető nyelvek listája a kiválasztáshoz, csatlakoztatott eszközök listája vagy push feliratkozások listája. A szekció fejléce statikus marad, míg a tartalom az adatoktól függően változik.

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

    var body: some View {
        Form {
            Section(header: Text("Kategóriák"),
                    footer: Text("Válassza ki a kívánt kategóriákat")) {
                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("Kiválasztva: \(selected.count) kategória")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Ebben a példában a ForEach egy Toggle-t generál a categories tömbből minden kategóriához. A szekció fejléce és lábléce egyszer van beállítva, és az egész csoportra vonatkozik. A második szekció a kiválasztott kategóriák számát jeleníti meg — nem függ a ForEach-től, és statikus marad. Ez a megközelítés rugalmas űrlapok létrehozását teszi lehetővé, ahol a fejléc és lábléc kontextusba helyezi a dinamikus elemek csoportját.

Section kód példák

Nézzünk meg egy teljes profilképernyő példát a Section használatával az adatok csoportosítására. Az űrlap három szekciót tartalmaz: felhasználói információk, adatvédelmi beállítások és statisztikák. Minden szekció a saját fejlécét használja, az utolsó pedig — láblécet összefoglaló információkkal.

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

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

            Section(header: Text("Statisztikák"),
                    footer: Text("Utolsó frissítés ma 14:30-kor")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Három Section egyértelműen elválasztja a funkcionális blokkokat: a profil szerkeszthető mezői, adatvédelmi kapcsolók és statisztikák. A második szekció validációt mutat be: az „E-mail megjelenítése“ Toggle ki van kapcsolva, amíg a profil nem nyilvános. A harmadik szekció lábléce az utolsó frissítés idejét mutatja — példa a lábléc használatára további kontextuális információkhoz. A LabeledContent egy szabványos SwiftUI komponens a „kulcs-érték“ pár megjelenítéséhez a Form-ban.

Section egyéni fejléccel

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Értesítések")
            .font(.headline)
    },
    footer: Text("Push és e-mail értesítések kezelése")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Ez a példa megmutatja, hogy a header bármilyen SwiftUI View lehet. Az Image és Text használata HStack-ben lehetővé teszi egy ikon hozzáadását a fejléc mellé, így a szekció vizuálisan kifejezőbbé válik. Az egyéni fejlécek hasznosak a fontos szekciók kiemelésére a felületen: értesítési beállítások, fizetős funkciók vagy figyelmeztetéseket tartalmazó szekciók. Azonban ne vigye túlzásba az egyéni fejléceket — 1–2 nem szabványos megjelenésű szekció képernyőnként elegendő a felület egységességének megőrzéséhez.