Form у SwiftUI: що це, створення форми та налаштування

Що таке Form у SwiftUI?

Form — це спеціалізований контейнер SwiftUI, призначений для створення форм введення та екранів налаштувань. Він успадковує поведінку List, але додає платформенні стилі: на iOS Form відображається як grouped-таблиця із заокругленими кутами секцій, на macOS — як стандартний системний список із прапорцями та контролами.

На відміну від ручного верстання з VStack і HStack, Form автоматично розставляє відступи між елементами, додає роздільники та адаптує зовнішній вигляд під системну тему — світлу або темну. Розробник описує лише логічну структуру: Section для групування та елементи керування всередині. Форма сама вирішує, як візуально розташувати Picker, Toggle або Stepper на конкретній платформі.

Form підтримує всі стандартні елементи введення SwiftUI: TextField для тексту, SecureField для паролів, Picker для вибору зі списку, Toggle для вкл/викл, Slider для діапазонів, Stepper для покрокових значень і DatePicker для дати. Кожен елемент автоматично отримує стиль, що відповідає HIG (Human Interface Guidelines) Apple на цільовій платформі.

Form vs List: порівняння контейнерів

Незважаючи на зовнішню схожість, Form і List вирішують різні завдання. List — універсальний контейнер для відображення списків даних, що прокручуються, з можливістю свайп-дій та редагування рядків. Form — спеціалізований контейнер для введення даних і налаштувань, оптимізований під системні стилі контролів.

List доречний для відображення динамічних даних: стрічки новин, чатів, каталогів товарів. Form — для статичних екранів із передбачуваним набором полів: профіль користувача, налаштування застосунку, реєстраційна анкета. Ключова відмінність: елементи Form можуть бути інтерактивними контролами, тоді як рядки List найчастіше відображають дані й реагують на натискання навігацією або дією.

За даними Apple Human Interface Guidelines (2025), Form слід використовувати для екранів налаштувань і введення, де на одному екрані знаходиться від 3 до 20 елементів керування й розділення на секції покращує сприйняття.

Секції Section всередині Form

Section — основний будівельний блок Form, що дозволяє групувати логічно пов'язані елементи. Кожна Section може мати заголовок, футер і довільну кількість контролів усередині. Система автоматично додає відступи між секціями й обгортає кожну у візуальний блок із заокругленими кутами.

Використання Section критично важливе для читабельності форми: елементи, згруповані за змістом, легше сприймаються користувачем. Наприклад, на екрані налаштувань профілю можна винести в окремі секції «Особисті дані», «Сповіщення» та «Безпека». Кожна секція може містити футер з пояснювальним текстом, який система відображає меншим шрифтом під групою елементів.

Form {
    Section(header: Text("Профіль")) {
        TextField("Ім'я", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Сповіщення"),
            footer: Text("Вимкнути під час нарад")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

У прикладі перша секція «Profile» містить два текстових поля без футера, друга секція «Notifications» — два перемикачі з поясненням під групою. Футер автоматично додає відступ і використовує caption-стиль шрифту. Section може містити футер без заголовка або заголовок без футера.

Елементи керування в Form

Form підтримує всі стандартні елементи введення SwiftUI. Picker у Form автоматично відображається як навігаційний рядок із переходом на окремий екран вибору на iOS. Toggle відображається як рядок із перемикачем, вирівняним по правому краю. TextField отримує системний стиль введення з плейсхолдером.

Для числових значень використовуються Stepper (покрокова зміна) і Slider (плавна зміна в діапазоні). DatePicker підтримує кілька режимів: date, time, dateAndTime. Для вибору кольору доступний ColorPicker. Кожен елемент адаптується під платформу без додаткового коду — на iOS контроли використовують нативні стилі UIKit, на macOS — AppKit.

Для кастомних контролів усередині Form можна використовувати будь-які SwiftUI View — вони успадковують стандартну поведінку секції. Однак рекомендується дотримуватися системних елементів, оскільки вони гарантують відповідність HIG і підтримують Accessibility (VoiceOver, Dynamic Type) без додаткового налаштування.

Приклади коду Form

Розглянемо створення екрана реєстрації з використанням Form. Форма містить чотири секції: особисті дані, вибір ролі, налаштування підписки та кнопку відправлення. Використовуються Section для групування та стандартні контроли SwiftUI.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Особиста інформація")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Роль")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("Зареєструватися") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Форма розбита на чотири Section: особисті дані з двома текстовими полями, вибір ролі через Picker, згода з умовами через Toggle і кнопка реєстрації. Кнопка вимкнена, поки користувач не погодиться з умовами — це приклад валідації всередині Form. NavigationStack додає заголовок і дозволяє Picker відкривати окремий екран вибору на iOS.

Форма налаштувань із підсекціями

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Зовнішній вигляд")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Гучність")
                    }
                }

                Section(header: Text("Нагадування"),
                        footer: Text("Ви отримаєте сповіщення у вибраний час")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Цей приклад демонструє комбінацію Slider, DatePicker і NavigationLink усередині Form. DatePicker використовує режим hourAndMinute для відображення лише часу. NavigationLink в останній секції створює перехід на екран розширених налаштувань — поширений патерн для Settings-подібних інтерфейсів. Заголовки та футери секцій роблять форму самодокументованою: користувач одразу розуміє, до якої групи належить кожен елемент керування.