Section u SwiftUI-ju: šta je, kreiranje sekcija i grupisanje

Шта је Section у SwiftUI-ју?

Section је структурна компонента SwiftUI-ја намењена за груписање елемената унутар Form и List контејнера. За разлику од VStack или HStack, Section додаје системске размаке, заглавље и подножје, као и визуелно истицање групе у облику блока са заобљеним угловима на iOS-у.

Section не мења понашање подређених елемената — она само организује њихов приказ. Све контроле унутар Section — Picker, Toggle, TextField — раде нормално, али су визуелно обједињене у логичку групу. Ово је посебно важно за екране форми, где корисник треба брзо да се оријентише у структури унетих података.

Систем аутоматски управља размацима између секција: растојање између Section на iOS-у износи 16–20 поена, а између елемената унутар Section — 0 (сепаратор између редова). Програмер не може променити ове размаке преко модификатора padding — њима управља систем ради обезбеђивања једнообразног изгледа.

Заглавље и подножје Section-а

Section прихвата два опциона параметра: header — заглавље групе, и footer — објашњавајући текст испод групе. Заглавље се приказује изнад елемената секције подебљаним фонтом у caption стилу, подножје — мањим фонтом сиве боје. Оба параметра прихватају било коју SwiftUI View, не само Text.

Заглавље Section помаже кориснику да разуме којој категорији припадају елементи унутар групе. На пример, на екрану подешавања, заглавља „Обавештења", „Приватност" и „Налог" одмах усмеравају корисника. Подножје је погодно за објашњења: „Искључите обавештења за време састанка" или „Лозинка мора садржати најмање 8 карактера". Подножје се аутоматски прелама у више редова по потреби.

Section(
    header: Text("Sigurnost naloga"),
    footer: Text("Koristite jaku lozinku od najmanje 8 karaktera.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

У примеру, Section има заглавље „Сигурност налога" и подножје са саветом о сигурности лозинке. Корисник види заглавље као ознаку секције, попуњава два поља и одмах чита упозорење испод њих. Оваква структура побољшава UX, јер се све информације о секцији налазе на једном екрану без потребе за посебном помоћи.

Section унутар Form и List

Section ради и унутар Form и унутар List, али визуелни приказ се разликује. У Form-у, Section се приказује као блок са заобљеним угловима и системском позадином, одвојен од суседних секција размацима. У List-у, Section може користити plain стил — без позадине и заобљења, или inset-grouped — са заобљеним блоковима, слично Form-у.

Избор контејнера утиче на стил Section-а. Постављање Section са истим садржајем унутар Form и List са .insetGrouped стилом даће исти резултат. Међутим, Form додаје системске размаке и подразумевано користи grouped стил, док List захтева експлицитно навођење стила преко модификатора .listStyle(.insetGrouped).

Да бисте постигли исти изглед у List-у, користите .listStyle(.insetGrouped). Овај стил имитира изглед Form-а и погодан је за екране подешавања изграђене на List-у. За стандардне листе података користите .plain — без истицања секција, са танким сепараторима између редова.

Динамички садржај преко ForEach

Section може садржати динамички број елемената преко ForEach. Ово омогућава креирање група са понављајућим елементима, задржавајући заглавље и подножје за целу групу. ForEach унутар Section итерира колекцију података и креира подређене View-ове за сваки елемент, без нарушавања структуре секције.

Динамичке секције су корисне за екране подешавања са променљивим бројем опција: листа доступних језика за избор, листа повезаних уређаја или листа push претплата. Заглавље секције остаје статично, а садржај се мења у зависности од података.

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

    var body: some View {
        Form {
            Section(header: Text("Kategorije"),
                    footer: Text("Izaberite željene kategorije")) {
                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("Izabrano: \(selected.count) kategorija")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

У овом примеру, ForEach генерише Toggle за сваку категорију из низа categories. Заглавље и подножје секције су постављени једном и примењују се на целу групу. Друга секција приказује број изабраних категорија — не зависи од ForEach и остаје статична. Овај приступ омогућава креирање флексибилних форми где заглавље и подножје контекстуализују групу динамичких елемената.

Примери кода Section-а

Размотримо комплетан пример екрана профила са употребом Section за груписање података. Форма садржи три секције: информације о кориснику, подешавања приватности и статистику. Свака секција користи своје заглавље, а последња — подножје са збирним информацијама.

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

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

            Section(header: Text("Statistika"),
                    footer: Text("Poslednje ažuriranje danas u 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Три Section јасно раздвајају функционалне блокове: поља за уређивање профила, прекидачи приватности и статистика. Друга секција демонстрира валидацију: Toggle „Прикажи е-пошту" је искључен док профил није јаван. Подножје треће секције показује време последњег ажурирања — пример употребе подножја за додатне контекстуалне информације. LabeledContent је стандардна SwiftUI компонента за приказивање пара „кључ-вредност" у Form-у.

Section са прилагођеним заглављем

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Obaveštenja")
            .font(.headline)
    },
    footer: Text("Upravljajte push i e-mail obaveštenjima")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Овај пример показује да header може бити било која SwiftUI View. Употреба HStack-а са Image и Text омогућава додавање иконе поред заглавља, чинећи секцију визуелно изражајнијом. Прилагођена заглавља су корисна за истицање важних секција у интерфејсу: подешавања обавештења, плаћене функције или секције са упозорењима. Међутим, не треба злоупотребљавати прилагођена заглавља — 1–2 секције са нестандардним изгледом на сваком екрану су довољне да се сачува једнообразност интерфејса.