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 είναι κατάλληλο για δυναμικά δεδομένα: ροές ειδήσεων, chat, κατάλογοι προϊόντων. Το 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. Οι επικεφαλίδες και τα υποσέλιδα των ενοτήτων κάνουν τη φόρμα αυτο-τεκμηριωμένη: ο χρήστης καταλαβαίνει αμέσως σε ποια ομάδα ανήκει κάθε στοιχείο ελέγχου.