Form în SwiftUI: ce este, crearea formularului și configurarea

Ce este Form în SwiftUI?

Form este un container specializat SwiftUI, destinat creării de formulare de introducere a datelor și ecrane de setări. Acesta moștenește comportamentul List, dar adaugă stiluri de platformă: pe iOS, Form se afișează ca un tabel grouped cu colțuri rotunjite ale secțiunilor, iar pe macOS — ca o listă de sistem standard cu checkbox-uri și controale.

Spre deosebire de aranjarea manuală cu VStack și HStack, Form distribuie automat distanțele între elemente, adaugă separatoare și adaptează aspectul la tema de sistem — deschisă sau închisă. Dezvoltatorul descrie doar structura logică: Section pentru grupare și elementele de control din interior. Forma decide singură cum să aranjeze vizual Picker, Toggle sau Stepper pe o anumită platformă.

Form suportă toate elementele standard de introducere SwiftUI: TextField pentru text, SecureField pentru parole, Picker pentru selecția dintr-o listă, Toggle pentru pornit/oprit, Slider pentru intervale, Stepper pentru valori incrementale și DatePicker pentru dată. Fiecare element primește automat un stil conform HIG (Human Interface Guidelines) Apple pe platforma țintă.

Form vs List: compararea containerelor

În ciuda asemănării exterioare, Form și List rezolvă sarcini diferite. List este un container universal pentru afișarea listelor de date derulabile, cu posibilitatea acțiunilor de glisare și editare a rândurilor. Form este un container specializat pentru introducerea datelor și setări, optimizat pentru stilurile de sistem ale controalelor.

List este potrivit pentru afișarea datelor dinamice: feed-uri de știri, chat-uri, cataloage de produse. Form — pentru ecrane statice cu un set previzibil de câmpuri: profil de utilizator, setări ale aplicației, formular de înregistrare. Diferența cheie: elementele Form pot fi controale interactive, în timp ce rândurile List afișează cel mai adesea date și reacționează la atingere prin navigare sau acțiune.

Potrivit Apple Human Interface Guidelines (2025), Form ar trebui folosit pentru ecrane de setări și introducere, unde pe un singur ecran se află între 3 și 20 de elemente de control, iar împărțirea în secțiuni îmbunătățește percepția.

Secțiuni Section în interiorul Form

Section este blocul de construcție principal al Form, permițând gruparea elementelor legate logic. Fiecare Section poate avea un titlu, un subsol și un număr arbitrar de controale în interior. Sistemul adaugă automat distanțe între secțiuni și înfășoară fiecare într-un bloc vizual cu colțuri rotunjite.

Utilizarea Section este crucială pentru lizibilitatea formularului: elementele grupate după sens sunt percepute mai ușor de utilizator. De exemplu, pe ecranul de setări al profilului puteți separa în secțiuni distincte „Date personale", „Notificări" și „Securitate". Fiecare secțiune poate conține un subsol cu text explicativ, afișat de sistem cu un font mai mic sub grupul de elemente.

Form {
    Section(header: Text("Profil")) {
        TextField("Nume", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Notificări"),
            footer: Text("Dezactivat în timpul întâlnirilor")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

În exemplu, prima secțiune „Profile" conține două câmpuri de text fără subsol, iar a doua secțiune „Notifications" — două comutatoare cu explicație sub grup. Subsolul adaugă automat un spațiu și folosește stilul de font caption. Section poate conține un subsol fără titlu sau un titlu fără subsol.

Elemente de control în Form

Form suportă toate elementele standard de introducere SwiftUI. Picker în Form se afișează automat ca un rând de navigare cu trecere la un ecran separat de selecție pe iOS. Toggle se afișează ca un rând cu un comutator aliniat la marginea dreaptă. TextField primește stilul de sistem de introducere cu placeholder.

Pentru valori numerice se folosesc Stepper (modificare incrementală) și Slider (modificare continuă într-un interval). DatePicker suportă mai multe moduri: date, time, dateAndTime. Pentru selectarea culorii este disponibil ColorPicker. Fiecare element se adaptează la platformă fără cod suplimentar — pe iOS controalele folosesc stilurile native UIKit, pe macOS — AppKit.

Pentru controale personalizate în interiorul Form se pot folosi orice View SwiftUI — acestea moștenesc comportamentul standard al secțiunii. Cu toate acestea, se recomandă să rămâneți la elementele de sistem, deoarece acestea garantează conformitatea cu HIG și suportă Accessibility (VoiceOver, Dynamic Type) fără configurare suplimentară.

Exemple de cod Form

Să analizăm crearea unui ecran de înregistrare cu Form. Formularul conține patru secțiuni: date personale, selectarea rolului, setările abonamentului și butonul de trimitere. Se folosesc Section pentru grupare și controalele standard 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("Date personale")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

                Section {
                    Button("Înregistrare") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Formularul este împărțit în patru Section: date personale cu două câmpuri de text, selectarea rolului prin Picker, acordul cu termenii prin Toggle și butonul de înregistrare. Butonul este dezactivat până când utilizatorul acceptă termenii — acesta este un exemplu de validare în interiorul Form. NavigationStack adaugă un titlu și permite Picker să deschidă un ecran separat de selecție pe iOS.

Formular de setări cu subsecțiuni

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("Aspect")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volum")
                    }
                }

                Section(header: Text("Memento"),
                        footer: Text("Veți primi o notificare la ora selectată")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Acest exemplu demonstrează combinația Slider, DatePicker și NavigationLink în interiorul Form. DatePicker folosește modul hourAndMinute pentru a afișa doar ora. NavigationLink din ultima secțiune creează o trecere către ecranul de setări avansate — un model comun pentru interfețe de tip Settings. Titlurile și subsolurile secțiunilor fac formularul auto-documentat: utilizatorul înțelege imediat la ce grup aparține fiecare element de control.