Section в SwiftUI: какво е, създаване на секция и групиране

Какво е 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("Сигурност на акаунта"),
    footer: Text("Използвайте силна парола с поне 8 знака.")
) {
    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("Категории"),
                    footer: Text("Изберете предпочитаните категории")) {
                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("Избрани: \(selected.count) категории")
                    .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("Информация за профила")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Поверителност")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Статистика"),
                    footer: Text("Последно обновено днес в 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("Известия")
            .font(.headline)
    },
    footer: Text("Управление на push и имейл известия")
) {
    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 секции с нестандартен външен вид на екран са достатъчни, за да се запази еднородността на интерфейса.