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 је универзални контејнер за приказ листи података које се могу скроловати, са могућношћу 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. Наслови и подножја секција чине форму самодокументованом: корисник одмах разуме којој групи припада свака контрола.