Section στο SwiftUI: τι είναι, δημιουργία ενότητας και ομαδοποίηση

Τι είναι το Section στο SwiftUI;

Section είναι ένα δομικό component του SwiftUI που προορίζεται για την ομαδοποίηση στοιχείων μέσα σε δοχεία Form και List. Σε αντίθεση με το VStack ή το HStack, το Section προσθέτει συστημικά διαστήματα, κεφαλίδα και υποσέλιδο, καθώς και οπτική επισήμανση της ομάδας ως μπλοκ με στρογγυλεμένες γωνίες στο iOS.

Το Section δεν αλλάζει τη συμπεριφορά των θυγατρικών στοιχείων — οργανώνει μόνο την παρουσίασή τους. Όλα τα χειριστήρια μέσα στο Section — Picker, Toggle, TextField — λειτουργούν κανονικά, αλλά είναι οπτικά ενωμένα σε μια λογική ομάδα. Αυτό είναι ιδιαίτερα σημαντικό για οθόνες φορμών όπου ο χρήστης πρέπει να πλοηγείται γρήγορα στη δομή των εισαγόμενων δεδομένων.

Το σύστημα διαχειρίζεται αυτόματα τα διαστήματα μεταξύ των ενοτήτων: η απόσταση μεταξύ Section στο iOS είναι 16–20 πόντους, μεταξύ στοιχείων μέσα στο Section — 0 (διαχωριστικό μεταξύ σειρών). Ο προγραμματιστής δεν μπορεί να αλλάξει αυτά τα διαστήματα μέσω τροποποιητών padding — ελέγχονται από το σύστημα για να εξασφαλιστεί ομοιόμορφη εμφάνιση.

Κεφαλίδα και υποσέλιδο Section

Το Section δέχεται δύο προαιρετικές παραμέτρους: header — κεφαλίδα της ομάδας, και footer — επεξηγηματικό κείμενο κάτω από την ομάδα. Η κεφαλίδα εμφανίζεται πάνω από τα στοιχεία της ενότητας με έντονη γραμματοσειρά στυλ caption, το υποσέλιδο — με μικρότερη γραμματοσειρά σε γκρι χρώμα. Και οι δύο παράμετροι δέχονται οποιοδήποτε SwiftUI View, όχι μόνο Text.

Η κεφαλίδα Section βοηθά τον χρήστη να καταλάβει σε ποια κατηγορία ανήκουν τα στοιχεία μέσα στην ομάδα. Για παράδειγμα, στην οθόνη ρυθμίσεων, οι κεφαλίδες «Ειδοποιήσεις», «Απόρρητο» και «Λογαριασμός» καθοδηγούν αμέσως τον χρήστη. Υποσέλιδο είναι κατάλληλο για επεξηγήσεις: «Απενεργοποιήστε τις ειδοποιήσεις κατά τη διάρκεια της συνάντησης» ή «Ο κωδικός πρόσβασης πρέπει να περιέχει τουλάχιστον 8 χαρακτήρες». Το υποσέλιδο σπάει αυτόματα σε πολλές γραμμές αν χρειαστεί.

Section(
    header: Text("Ασφάλεια λογαριασμού"),
    footer: Text("Χρησιμοποιήστε έναν ισχυρό κωδικό πρόσβασης με τουλάχιστον 8 χαρακτήρες.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Στο παράδειγμα, το Section έχει κεφαλίδα «Ασφάλεια λογαριασμού» και υποσέλιδο με συμβουλή ασφαλείας κωδικού. Ο χρήστης βλέπει την κεφαλίδα ως ετικέτα ενότητας, συμπληρώνει δύο πεδία και διαβάζει αμέσως την προειδοποίηση κάτω από αυτά. Μια τέτοια δομή βελτιώνει την UX, καθώς όλες οι πληροφορίες για την ενότητα βρίσκονται σε μία οθόνη χωρίς την ανάγκη ξεχωριστής βοήθειας.

Section μέσα σε Form και List

Το Section λειτουργεί τόσο μέσα σε Form όσο και σε List, αλλά η οπτική αναπαράσταση διαφέρει. Στο Form, το Section εμφανίζεται ως μπλοκ με στρογγυλεμένες γωνίες και συστημικό φόντο, διαχωρισμένο από τις γειτονικές ενότητες με διαστήματα. Στο List, το Section μπορεί να χρησιμοποιήσει στυλ plain — χωρίς φόντο και στρογγυλοποίηση, ή inset-grouped — με στρογγυλεμένα μπλοκ, παρόμοια με το Form.

Η επιλογή του δοχείου επηρεάζει το στυλ του Section. Η τοποθέτηση Section με ίδιο περιεχόμενο μέσα σε Form και List με στυλ .insetGrouped θα δώσει το ίδιο αποτέλεσμα. Ωστόσο, το Form προσθέτει συστημικά διαστήματα και χρησιμοποιεί από προεπιλογή grouped στυλ, ενώ το List απαιτεί ρητό καθορισμό του στυλ μέσω του τροποποιητή .listStyle(.insetGrouped).

Για να επιτύχετε την ίδια εμφάνιση στο List, χρησιμοποιήστε .listStyle(.insetGrouped). Αυτό το στυλ μιμείται την εμφάνιση του Form και είναι κατάλληλο για οθόνες ρυθμίσεων που βασίζονται σε List. Για τυπικές λίστες δεδομένων, χρησιμοποιήστε .plain — χωρίς επισήμανση ενοτήτων, με λεπτούς διαχωριστές μεταξύ γραμμών.

Δυναμικό περιεχόμενο μέσω ForEach

Section μπορεί να περιέχει δυναμικό αριθμό στοιχείων μέσω ForEach. Αυτό επιτρέπει τη δημιουργία ομάδων με επαναλαμβανόμενα στοιχεία, διατηρώντας την κεφαλίδα και το υποσέλιδο για ολόκληρη την ομάδα. Το ForEach μέσα στο Section επαναλαμβάνει τη συλλογή δεδομένων και δημιουργεί θυγατρικά View για κάθε στοιχείο, χωρίς να διαταράσσει τη δομή της ενότητας.

Οι δυναμικές ενότητες είναι χρήσιμες για οθόνες ρυθμίσεων με μεταβλητό αριθμό επιλογών: λίστα διαθέσιμων γλωσσών για επιλογή, λίστα συνδεδεμένων συσκευών ή λίστα συνδρομών push. Η κεφαλίδα της ενότητας παραμένει στατική, ενώ το περιεχόμενο αλλάζει ανάλογα με τα δεδομένα.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Κατηγορίες"),
                    footer: Text("Επιλέξτε τις προτιμώμενες κατηγορίες")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Επιλεγμένες: \(selected.count) κατηγορίες")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Σε αυτό το παράδειγμα, το ForEach δημιουργεί ένα Toggle για κάθε κατηγορία από τον πίνακα categories. Η κεφαλίδα και το υποσέλιδο της ενότητας ορίζονται μία φορά και ισχύουν για ολόκληρη την ομάδα. Η δεύτερη ενότητα εμφανίζει τον αριθμό των επιλεγμένων κατηγοριών — δεν εξαρτάται από το ForEach και παραμένει στατική. Αυτή η προσέγγιση επιτρέπει τη δημιουργία ευέλικτων φορμών όπου η κεφαλίδα και το υποσέλιδο πλαισιώνουν την ομάδα δυναμικών στοιχείων.

Παραδείγματα κώδικα Section

Ας εξετάσουμε ένα πλήρες παράδειγμα οθόνης προφίλ με χρήση Section για ομαδοποίηση δεδομένων. Η φόρμα περιέχει τρεις ενότητες: πληροφορίες χρήστη, ρυθμίσεις απορρήτου και στατιστικά. Κάθε ενότητα χρησιμοποιεί τη δική της κεφαλίδα, και η τελευταία — υποσέλιδο με συνοπτικές πληροφορίες.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Πληροφορίες προφίλ")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Απόρρητο")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Στατιστικά"),
                    footer: Text("Τελευταία ενημέρωση σήμερα στις 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Τρία Section διαχωρίζουν καθαρά τα λειτουργικά μπλοκ: επεξεργάσιμα πεδία προφίλ, διακόπτες απορρήτου και στατιστικά. Η δεύτερη ενότητα δείχνει επικύρωση: το Toggle «Εμφάνιση email» είναι απενεργοποιημένο έως ότου το προφίλ γίνει δημόσιο. Το υποσέλιδο της τρίτης ενότητας δείχνει την ώρα της τελευταίας ενημέρωσης — παράδειγμα χρήσης υποσέλιδου για πρόσθετες συμφραζόμενες πληροφορίες. Το LabeledContent είναι ένα τυπικό component SwiftUI για εμφάνιση ζεύγους «κλειδί-τιμή» στο Form.

Section με προσαρμοσμένη κεφαλίδα

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Ειδοποιήσεις")
            .font(.headline)
    },
    footer: Text("Διαχείριση ειδοποιήσεων push και email")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Αυτό το παράδειγμα δείχνει ότι το header μπορεί να είναι οποιοδήποτε SwiftUI View. Η χρήση HStack με Image και Text επιτρέπει την προσθήκη εικονιδίου δίπλα στην κεφαλίδα, κάνοντας την ενότητα οπτικά πιο εκφραστική. Οι προσαρμοσμένες κεφαλίδες είναι χρήσιμες για την επισήμανση σημαντικών ενοτήτων στη διεπαφή: ρυθμίσεις ειδοποιήσεων, πληρωμένες λειτουργίες ή ενότητες με προειδοποιήσεις. Ωστόσο, μην το παρακάνετε με προσαρμοσμένες κεφαλίδες — 1–2 ενότητες με μη τυπική εμφάνιση ανά οθόνη είναι αρκετές για να διατηρηθεί η ομοιομορφία της διεπαφής.