Form a SwiftUI-ban: mi ez, űrlap létrehozása és beállítása

Mi az a Form a SwiftUI-ban?

A Form egy speciális SwiftUI-konténer, amelyet adatbeviteli űrlapok és beállítási képernyők létrehozására terveztek. Örökli a List viselkedését, de platformstílusokat ad hozzá: iOS-en a Form grouped-táblaként jelenik meg a szekciók lekerekített sarkaival, macOS-en pedig standard rendszerlistaként jelölőnégyzetekkel és vezérlőelemekkel.

A VStack és HStack kézi elrendezésével ellentétben a Form automatikusan elosztja az elemek közötti elválasztásokat, elválasztókat ad hozzá, és a megjelenést a rendszertémához — világoshoz vagy sötéthez — igazítja. A fejlesztő csak a logikai szerkezetet írja le: a Section-t a csoportosításhoz és a benne lévő vezérlőelemeket. Az űrlap maga dönti el, hogyan helyezze el vizuálisan a Picker, Toggle vagy Stepper elemeket az adott platformon.

A Form támogatja az összes standard SwiftUI beviteli elemet: TextField szöveghez, SecureField jelszavakhoz, Picker listából való választáshoz, Toggle be/ki kapcsoláshoz, Slider tartományokhoz, Stepper lépcsős értékekhez és DatePicker dátumhoz. Minden elem automatikusan a HIG (Human Interface Guidelines) szerinti stílust kapja a célplatformon az Apple-től.

Form vs List: a konténerek összehasonlítása

A külső hasonlóság ellenére a Form és a List különböző feladatokat old meg. A List egy univerzális konténer görgethető adatlisták megjelenítéséhez, csúsztatási műveletekkel és sorok szerkesztésével. A Form egy speciális konténer az adatbevitelhez és beállításokhoz, a vezérlőelemek rendszerstílusaira optimalizálva.

A List dinamikus adatok megjelenítésére alkalmas: hírfolyamok, csevegések, termékkatalógusok. A Form — statikus képernyőkhöz kiszámítható mezőkészlettel: felhasználói profil, alkalmazásbeállítások, regisztrációs űrlap. A kulcsfontosságú különbség: a Form elemei lehetnek interaktív vezérlőelemek, míg a List sorai leggyakrabban adatokat jelenítenek meg, és érintésre navigációval vagy művelettel reagálnak.

A Apple Human Interface Guidelines (2025) szerint a Formot beállítási és beviteli képernyőkhöz kell használni, ahol egy képernyőn 3 és 20 közötti vezérlőelem van, és a szekciókra bontás javítja az észlelést.

Section szekciók a Formon belül

A Section a Form fő építőeleme, amely lehetővé teszi a logikailag összefüggő elemek csoportosítását. Minden Section rendelkezhet fejléccel, lábléccel és tetszőleges számú vezérlőelemmel belül. A rendszer automatikusan hozzáadja a szekciók közötti elválasztásokat, és mindegyiket lekerekített sarkú vizuális blokkba csomagolja.

A Section használata kritikus fontosságú az űrlap olvashatósága szempontjából: a jelentés szerint csoportosított elemeket a felhasználó könnyebben észleli. Például a profilbeállítások képernyőjén külön szekciókba lehet rendezni a „Személyes adatok", „Értesítések" és „Biztonság" elemeket. Minden szekció tartalmazhat magyarázó szöveggel ellátott láblécet, amelyet a rendszer kisebb betűmérettel jelenít meg az elemcsoport alatt.

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

    Section(header: Text("Értesítések"),
            footer: Text("Kikapcsolás az értekezletek alatt")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

A példában az első „Profile" szekció két szövegmezőt tartalmaz lábléc nélkül, a második „Notifications" szekció pedig két kapcsolót magyarázattal a csoport alatt. A lábléc automatikusan elválasztást ad hozzá, és caption betűstílust használ. A Section tartalmazhat láblécet fejléc nélkül vagy fejlécet lábléc nélkül.

Vezérlőelemek a Formban

A Form támogatja az összes standard SwiftUI beviteli elemet. A Picker a Formban automatikusan navigációs sorként jelenik meg, külön választóképernyőre való átnavigálással iOS-en. A Toggle kapcsolóval ellátott sorként jelenik meg, a jobb szélhez igazítva. A TextField a rendszer beviteli stílusát kapja placeholderrel.

Numerikus értékekhez Stepper (lépcsős változtatás) és Slider (folyamatos változtatás tartományban) használható. A DatePicker több módot támogat: date, time, dateAndTime. Színválasztáshoz ColorPicker áll rendelkezésre. Minden elem további kód nélkül igazodik a platformhoz — iOS-en a vezérlőelemek a UIKit natív stílusait, macOS-en az AppKitet használják.

A Formon belüli egyedi vezérlőelemekhez bármilyen SwiftUI View használható — ezek öröklik a szekció standard viselkedését. Azonban ajánlott a rendszerelemeknél maradni, mert ezek garantálják a HIG-nek való megfelelést, és további beállítás nélkül támogatják az Accessibility (VoiceOver, Dynamic Type) funkciót.

Form kódpéldák

Nézzük meg egy regisztrációs képernyő létrehozását a Form használatával. Az űrlap négy szekciót tartalmaz: személyes adatok, szerepkör kiválasztása, előfizetési beállítások és küldőgomb. A Section csoportosításhoz és a standard SwiftUI vezérlőelemek használatosak.

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("Személyes adatok")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

                Section {
                    Button("Regisztráció") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Az űrlap négy Section-re van bontva: személyes adatok két szövegmezővel, szerepkör kiválasztása Pickerrel, a feltételekkel való egyetértés Toggle-lel és a regisztrációs gomb. A gomb addig inaktív, amíg a felhasználó nem fogadja el a feltételeket — ez egy példa a Formon belüli validációra. A NavigationStack fejlécet ad hozzá, és lehetővé teszi, hogy a Picker külön választóképernyőt nyisson iOS-en.

Beállítási űrlap alszekciókkal

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

                Section(header: Text("Emlékeztetők"),
                        footer: Text("Értesítést kap a kiválasztott időpontban")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Ez a példa a Slider, DatePicker és NavigationLink kombinációját mutatja be a Formon belül. A DatePicker a hourAndMinute módot használja, hogy csak az időt jelenítse meg. Az utolsó szekcióban lévő NavigationLink átnavigálást hoz létre a kibővített beállítások képernyőjére — gyakori minta a Settings stílusú felületeknél. A szekciók fejlécei és láblécei öndokumentálóvá teszik az űrlapot: a felhasználó azonnal megérti, melyik csoporthoz tartozik az egyes vezérlőelemek.