Section ve SwiftUI: co to je, vytváření sekcí a seskupování

Co je Section ve SwiftUI?

Section je strukturální komponenta SwiftUI určená pro seskupování prvků uvnitř kontejnerů Form a List. Na rozdíl od VStack nebo HStack přidává Section systémové mezery, záhlaví a zápatí a také vizuální zvýraznění skupiny jako bloku se zaoblenými rohy na iOS.

Section nemění chování podřízených prvků — pouze organizuje jejich prezentaci. Všechny ovládací prvky uvnitř Section — Picker, Toggle, TextField — fungují normálně, ale jsou vizuálně sjednoceny do logické skupiny. To je důležité zejména pro obrazovky formulářů, kde se uživatel musí rychle orientovat ve struktuře zadávaných dat.

Systém automaticky spravuje mezery mezi sekcemi: vzdálenost mezi Section na iOS je 16–20 bodů, mezi prvky uvnitř Section — 0 (oddělovač mezi řádky). Vývojář nemůže tyto mezery změnit pomocí modifikátorů padding — jsou řízeny systémem pro zajištění jednotného vzhledu.

Záhlaví a zápatí Section

Section přijímá dva volitelné parametry: header — záhlaví skupiny, a footer — vysvětlující text pod skupinou. Záhlaví se zobrazuje nad prvky sekce tučným písmem ve stylu caption, zápatí — menším písmem šedé barvy. Oba parametry přijímají jakékoli SwiftUI View, nejen Text.

Záhlaví Section pomáhá uživateli pochopit, do které kategorie prvky ve skupině patří. Například na obrazovce nastavení záhlaví „Oznámení", „Soukromí" a „Účet" uživatele okamžitě orientují. Zápatí je vhodné pro vysvětlení: „Vypněte oznámení během schůzky" nebo „Heslo musí obsahovat alespoň 8 znaků". Zápatí se v případě potřeby automaticky rozdělí do více řádků.

Section(
    header: Text("Zabezpečení účtu"),
    footer: Text("Použijte silné heslo o délce alespoň 8 znaků.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

V příkladu má Section záhlaví „Zabezpečení účtu" a zápatí s radou pro bezpečnost hesla. Uživatel vidí záhlaví jako štítek sekce, vyplní dvě pole a okamžitě si přečte varování pod nimi. Taková struktura zlepšuje UX, protože všechny informace o sekci jsou na jedné obrazovce bez nutnosti přecházet do samostatné nápovědy.

Section uvnitř Form a List

Section funguje jak uvnitř Form, tak uvnitř List, ale vizuální reprezentace se liší. Ve Form se Section zobrazuje jako blok s zaoblenými rohy a systémovým pozadím, oddělený od sousedních sekcí mezerami. V List může Section použít styl plain — bez pozadí a zaoblení, nebo inset-grouped — se zaoblenými bloky, podobně jako Form.

Výběr kontejneru ovlivňuje styl Section. Umístění Section se stejným obsahem do Form a List se stylem .insetGrouped poskytne stejný výsledek. Nicméně Form přidává systémové mezery a standardně používá grouped styl, zatímco List vyžaduje explicitní určení stylu pomocí modifikátoru .listStyle(.insetGrouped).

Pro dosažení stejného vzhledu v List použijte .listStyle(.insetGrouped). Tento styl napodobuje vzhled Form a je vhodný pro obrazovky nastavení postavené na List. Pro standardní seznamy dat použijte .plain — bez zvýraznění sekcí, s tenkými oddělovači mezi řádky.

Dynamický obsah pomocí ForEach

Section může obsahovat dynamický počet prvků pomocí ForEach. To umožňuje vytvářet skupiny s opakujícími se prvky při zachování záhlaví a zápatí pro celou skupinu. ForEach uvnitř Section iteruje kolekci dat a vytváří podřízené Views pro každý prvek, aniž by narušil strukturu sekce.

Dynamické sekce jsou užitečné pro obrazovky nastavení s proměnným počtem možností: seznam dostupných jazyků k výběru, seznam připojených zařízení nebo seznam push předplatných. Záhlaví sekce zůstává statické, zatímco obsah se mění v závislosti na datech.

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

    var body: some View {
        Form {
            Section(header: Text("Kategorie"),
                    footer: Text("Vyberte preferované kategorie")) {
                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("Vybráno: \(selected.count) kategorií")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

V tomto příkladu ForEach generuje Toggle pro každou kategorii z pole categories. Záhlaví a zápatí sekce jsou nastaveny jednou a platí pro celou skupinu. Druhá sekce zobrazuje počet vybraných kategorií — nezávisí na ForEach a zůstává statická. Tento přístup umožňuje vytvářet flexibilní formuláře, kde záhlaví a zápatí kontextualizují skupinu dynamických prvků.

Příklady kódu Section

Podívejme se na úplný příklad obrazovky profilu s použitím Section pro seskupování dat. Formulář obsahuje tři sekce: informace o uživateli, nastavení soukromí a statistiky. Každá sekce používá vlastní záhlaví a poslední — zápatí se souhrnnými informacemi.

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

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

            Section(header: Text("Statistiky"),
                    footer: Text("Poslední aktualizace dnes ve 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Tři Section jasně oddělují funkční bloky: editovatelná pole profilu, přepínače soukromí a statistiky. Druhá sekce demonstruje validaci: Toggle „Zobrazit email" je vypnutý, dokud profil není veřejný. Zápatí třetí sekce ukazuje čas poslední aktualizace — příklad použití zápatí pro doplňující kontextové informace. LabeledContent je standardní komponenta SwiftUI pro zobrazení páru „klíč-hodnota" ve Form.

Section s vlastním záhlavím

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Oznámení")
            .font(.headline)
    },
    footer: Text("Spravovat push a e-mailová oznámení")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Tento příklad ukazuje, že header může být jakékoli SwiftUI View. Použití HStack s Image a Text umožňuje přidat ikonu vedle záhlaví, čímž je sekce vizuálně výraznější. Vlastní záhlaví jsou užitečná pro zvýraznění důležitých sekcí v rozhraní: nastavení oznámení, placené funkce nebo sekce s varováními. Nicméně s vlastními záhlavími to nepřehánějte — 1–2 sekce s nestandardním vzhledem na obrazovku stačí k zachování jednotnosti rozhraní.