Form ve SwiftUI: co to je, vytvoření formuláře a nastavení

Co je Form ve SwiftUI?

Form je specializovaný kontejner SwiftUI určený k vytváření formulářů pro zadávání dat a obrazovek nastavení. Dědí chování List, ale přidává platformní styly: na iOS se Form zobrazuje jako grouped tabulka se zaoblenými rohy sekcí, na macOS jako standardní systémový seznam se zaškrtávacími políčky a ovládacími prvky.

Na rozdíl od ručního rozvržení s VStack a HStack Form automaticky rozmístí mezery mezi prvky, přidává oddělovače a přizpůsobuje vzhled systémovému motivu — světlému nebo tmavému. Vývojář popisuje pouze logickou strukturu: Section pro seskupování a ovládací prvky uvnitř. Formulář sám rozhoduje, jak vizuálně rozmístit Picker, Toggle nebo Stepper na konkrétní platformě.

Form podporuje všechny standardní prvky pro zadávání ve SwiftUI: TextField pro text, SecureField pro hesla, Picker pro výběr ze seznamu, Toggle pro zapnutí/vypnutí, Slider pro rozsahy, Stepper pro krokové hodnoty a DatePicker pro datum. Každý prvek automaticky získá styl odpovídající HIG (Human Interface Guidelines) od Apple na cílové platformě.

Form vs List: srovnání kontejnerů

Přes vnější podobnost řeší Form a List různé úkoly. List je univerzální kontejner pro zobrazování rolovatelných seznamů dat s možností swipe akcí a úprav řádků. Form je specializovaný kontejner pro zadávání dat a nastavení, optimalizovaný pro systémové styly ovládacích prvků.

List se hodí pro zobrazování dynamických dat: zpravodajské kanály, chaty, katalogy produktů. Form — pro statické obrazovky s předvídatelnou sadou polí: uživatelský profil, nastavení aplikace, registrační formulář. Klíčový rozdíl: prvky Formu mohou být interaktivními ovládacími prvky, zatímco řádky Listu nejčastěji zobrazují data a na klepnutí reagují navigací nebo akcí.

Podle Apple Human Interface Guidelines (2025) by se Form měl používat pro obrazovky nastavení a zadávání, kde se na jedné obrazovce nachází 3 až 20 ovládacích prvků a rozdělení do sekcí zlepšuje vnímání.

Sekce Section uvnitř Form

Section je hlavní stavební blok Formu, který umožňuje seskupovat logicky související prvky. Každá Section může mít nadpis, patičku a libovolný počet ovládacích prvků uvnitř. Systém automaticky přidává mezery mezi sekcemi a obaluje každou do vizuálního bloku se zaoblenými rohy.

Použití Section je klíčové pro čitelnost formuláře: prvky seskupené podle významu uživatel snáze vnímá. Například na obrazovce nastavení profilu lze rozdělit do samostatných sekcí „Osobní údaje", „Oznámení" a „Zabezpečení". Každá sekce může obsahovat patičku s vysvětlujícím textem, který systém zobrazí menším písmem pod skupinou prvků.

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

    Section(header: Text("Oznámení"),
            footer: Text("Vypnout během schůzek")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

V příkladu první sekce „Profile" obsahuje dvě textová pole bez patičky, druhá sekce „Notifications" dva přepínače s vysvětlením pod skupinou. Patička automaticky přidává mezeru a používá styl písma caption. Section může obsahovat patičku bez nadpisu nebo nadpis bez patičky.

Ovládací prvky ve Form

Form podporuje všechny standardní prvky pro zadávání ve SwiftUI. Picker ve Formu se automaticky zobrazuje jako navigační řádek s přechodem na samostatnou obrazovku výběru na iOS. Toggle se zobrazuje jako řádek s přepínačem zarovnaným k pravému okraji. TextField získává systémový styl zadávání s placeholderem.

Pro číselné hodnoty se používají Stepper (kroková změna) a Slider (plynulá změna v rozsahu). DatePicker podporuje několik režimů: date, time, dateAndTime. Pro výběr barvy je k dispozici ColorPicker. Každý prvek se přizpůsobí platformě bez dalšího kódu — na iOS používají ovládací prvky nativní styly UIKit, na macOS AppKit.

Pro vlastní ovládací prvky uvnitř Form lze použít libovolné SwiftUI View — dědí standardní chování sekce. Nicméně se doporučuje držet se systémových prvků, protože zaručují soulad s HIG a podporují Accessibility (VoiceOver, Dynamic Type) bez dalšího nastavení.

Příklady kódu Form

Podívejme se na vytvoření registrační obrazovky pomocí Form. Formulář obsahuje čtyři sekce: osobní údaje, výběr role, nastavení předplatného a tlačítko odeslání. K seskupování se používají Section a standardní ovládací prvky 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("Osobní údaje")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

                Section {
                    Button("Registrovat se") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Formulář je rozdělen do čtyř Section: osobní údaje se dvěma textovými poli, výběr role přes Picker, souhlas s podmínkami přes Toggle a tlačítko registrace. Tlačítko je neaktivní, dokud uživatel nesouhlasí s podmínkami — to je příklad validace uvnitř Formu. NavigationStack přidává nadpis a umožňuje Pickeru otevřít samostatnou obrazovku výběru na iOS.

Formulář nastavení s podsekcemi

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

                Section(header: Text("Připomenutí"),
                        footer: Text("Ve zvolený čas obdržíte oznámení")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Tento příklad ukazuje kombinaci Slider, DatePicker a NavigationLink uvnitř Formu. DatePicker používá režim hourAndMinute pro zobrazení pouze času. NavigationLink v poslední sekci vytváří přechod na obrazovku rozšířeného nastavení — běžný vzor pro rozhraní ve stylu Settings. Nadpisy a patičky sekcí činí formulář samodokumentujícím: uživatel okamžitě pochopí, do které skupiny každý ovládací prvek patří.