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("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

У прикладі Section має заголовок «Account Security» і футер із порадою щодо безпеки пароля. Користувач бачить заголовок як мітку розділу, заповнює два поля і відразу читає попередження під ними. Така структура покращує 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("Categories"),
                    footer: Text("Select your preferred categories")) {
                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: \(selected.count) categories")
                    .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("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

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

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Три Section чітко розділяють функціональні блоки: редаговані поля профілю, перемикачі приватності та статистику. Друга секція демонструє валідацію: Toggle «Show email» вимкнено, поки профіль не публічний. Футер третьої секції показує час останнього оновлення — приклад використання футера для додаткової контекстної інформації. LabeledContent — стандартний компонент SwiftUI для відображення пари «ключ-значення» у Form.

Section з кастомним заголовком

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    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 секцій з нестандартним оформленням, щоб зберегти єдність інтерфейсу.