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 срещу List: сравнение на контейнерите

Въпреки външната прилика, Form и List решават различни задачи. List е универсален контейнер за показване на превъртаеми списъци с данни с възможност за swipe действия и редактиране на редове. 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 получава системен стил за въвеждане с placeholder.

За числови стойности се използват 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. Заглавията и колонтитулите на секциите правят формуляра самодокументиращ се: потребителят веднага разбира към коя група принадлежи всеки управляващ елемент.