@ViewBuilder: τι είναι, result builder για View στο SwiftUI

Τι είναι το @ViewBuilder στο SwiftUI;

@ViewBuilder — είναι ένας σχολιασμός που υλοποιεί το μοτίβο result builder (SE-0289), επιτρέποντας στο SwiftUI να συλλέγει πολλαπλά View σε μια ενιαία σύνθεση χρησιμοποιώντας δηλωτική σύνταξη. Τυλίγει αυτόματα πολλαπλές εκφράσεις, δομές υπό όρους και προαιρετικές τιμές στους αντίστοιχους τύπους: TupleView, ConditionalContent, OptionalContent.

Πριν από την εμφάνιση του result builder, οι προγραμματιστές έπρεπε να τυλίγουν χειροκίνητα τα στοιχεία σε VStack ή HStack, και για τη λογική υπό όρους να χρησιμοποιούν τριαδικούς τελεστές ή μεθόδους εργοστασίου. Το @ViewBuilder έκανε τη σύνταξη του SwiftUI συνοπτική και ευανάγνωστη, επιτρέποντας τη σύνταξη κώδικα που μοιάζει με κανονικό Swift με if/else και βρόχους.

Σύμφωνα με το Swift Evolution SE-0289, τα result builders είναι ένας γενικός μηχανισμός που δεν συνδέεται με το SwiftUI. Το @ViewBuilder είναι μία από τις υλοποιήσεις αυτού του μηχανισμού, μαζί με το @StringBuilder για τη δημιουργία συμβολοσειρών και υλοποιήσεις βιβλιοθηκών για άλλα DSL. Στο SwiftUI, το @ViewBuilder χρησιμοποιείται όχι μόνο για το body, αλλά και για τις παραμέτρους κλεισίματος των δοχείων (VStack, HStack, ZStack, List).

Διαφορά από την προστακτική προσέγγιση

Στο προστακτικό UIKit, δημιουργείτε προστακτικά ένα UIView, διαμορφώνετε τις ιδιότητές του και το προσθέτετε στην ιεραρχία μέσω addSubview. Στο SwiftUI με @ViewBuilder, περιγράφετε δηλωτικά ποια View πρέπει να εμφανίζονται και το SwiftUI διαχειρίζεται τη δημιουργία, ενημέρωση και διαγραφή στοιχείων με βάση τις αλλαγές κατάστασης.

Πώς λειτουργεί το @ViewBuilder: result builder

Result builder — είναι ένας μηχανισμός Swift που μετατρέπει μια ακολουθία εκφράσεων σε μια ενιαία σύνθετη τιμή μέσω στατικών μεθόδων buildBlock, buildOptional, buildEither και άλλων. Όταν ο μεταγλωττιστής βλέπει τον σχολιασμό @ViewBuilder, εφαρμόζει αυτόματα αυτές τις μεθόδους στο μπλοκ κώδικα κατά τη διάρκεια της μεταγλώττισης.

@resultBuilder
struct ViewBuilder {
    static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)>
    static func buildIf<C>(_ c: C?) -> C?
    static func buildEither<T, F>(first: T) -> ConditionalContent<T, F>
    static func buildEither<T, F>(second: F) -> ConditionalContent<T, F>
}

buildBlock δέχεται από 1 έως 10 εκφράσεις και επιστρέφει TupleView. Κάθε αριθμός εκφράσεων έχει τη δική του υπερφόρτωση buildBlock: από buildBlock<C0> έως buildBlock<C0, C1, ..., C9>. Γιʼ αυτό ακριβώς ο αριθμός στοιχείων σε ένα μπλοκ @ViewBuilder είναι περιορισμένος σε 10.

buildEither (first/second) επεξεργάζεται δομές if/else. Κάθε κλάδος μεταβιβάζεται στην αντίστοιχη μέθοδο και το αποτέλεσμα τυλίγεται σε ConditionalContent — ένας τύπος που κρύβει τους συγκεκριμένους τύπους των κλάδων και παρέχει μια ενοποιημένη διεπαφή για το SwiftUI.

Σιωπηρή λειτουργία @ViewBuilder

Στο SwiftUI, η ιδιότητα body είναι ήδη σιωπηρά σχολιασμένη με @ViewBuilder — δεν βλέπετε αυτόν τον σχολιασμό στον κώδικα, αλλά ο μεταγλωττιστής τον εφαρμόζει αυτόματα. Ωστόσο, για ιδιότητες χρήστη που επιστρέφουν πολλαπλά View ή για παραμέτρους κλεισίματος, ο σχολιασμός πρέπει να καθοριστεί ρητά.

Περιορισμοί του @ViewBuilder και πώς να τους παρακάμψετε

Περιορισμός 1 — 10 στοιχεία σε ένα μπλοκ. Αυτός είναι ο πιο γνωστός περιορισμός του @ViewBuilder. Αν χρειαστεί να εμφανίσετε περισσότερα από 10 στοιχεία σε ένα επίπεδο, ο μεταγλωττιστής θα δώσει σφάλμα. Μπορείτε να τον παρακάμψετε με Group, ForEach, List ή διαχωρισμό σε υποστοιχεία. Το Group δεν προσθέτει οπτική ένθεση, αλλά κάθε Group μετράει ως ένα στοιχείο.

struct ManyElementsView: View {
    var body: some View {
        Group {
            Text("1"); Text("2"); Text("3")
            Text("4"); Text("5"); Text("6")
            Text("7"); Text("8"); Text("9")
        }
        Group {
            Text("10"); Text("11"); Text("12")
        }
    }
}

Περιορισμός 2 — έλλειψη υποστήριξης για ορισμένες δομές. Το @ViewBuilder δεν υποστηρίζει do/catch, guard, for-in (χωρίς ForEach) και άλλες δομές ελέγχου. Για βρόχους, χρησιμοποιήστε ForEach με αναγνωρίσιμα δεδομένα. Για διαχείριση σφαλμάτων, χρησιμοποιήστε ξεχωριστά View που δέχονται Result ή προαιρετικές τιμές.

Περιορισμός 3 — δυσκολία εντοπισμού σφαλμάτων. Σε σφάλματα στο @ViewBuilder, ο μεταγλωττιστής δημιουργεί εκτενή μηνύματα στα οποία είναι δύσκολο να βρεθεί η βασική αιτία. Τυπικά προβλήματα: αναντιστοιχία τύπων σε κλάδους if/else, υπέρβαση του ορίου 10 στοιχείων ή έλλειψη της απαιτούμενης υπερφόρτωσης buildBlock.

Μοτίβα χρήσης @ViewBuilder

Μοτίβο 1: υπό όρους εμφάνιση μέσω if/else. Το πιο συνηθισμένο σενάριο χρήσης του @ViewBuilder. Επιτρέπει την εμφάνιση διαφορετικών View ανάλογα με την κατάσταση χωρίς τη χρήση τριαδικών τελεστών ή μεθόδων εργοστασίου.

struct StatusView: View {
    var status: LoadStatus

    @ViewBuilder
    var body: some View {
        switch status {
        case .loading:
            ProgressView("Loading...")
        case .loaded(let data):
            DataView(data: data)
        case .error(let message):
            ErrorView(message: message)
        }
    }
}

Μοτίβο 2: @ViewBuilder σε παραμέτρους συναρτήσεων και αρχικοποιητών. Χρησιμοποιείται για τη δημιουργία επαναχρησιμοποιήσιμων δοχείων που δέχονται θυγατρικά View μέσω κλεισίματος. Αυτό είναι ένα τυπικό μοτίβο για βιβλιοθήκες και στοιχεία UI.

struct SectionCard<Content: View>: View {
    let title: String
    @ViewBuilder let content: Content

    var body: some View {
        VStack(alignment: .leading) {
            Text(title).font(.headline)
            content
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(12)
    }
}

Μοτίβο 3: σύνθεση με ForEach. Το @ViewBuilder λειτουργεί σωστά με το ForEach, επιτρέποντας δυναμική δημιουργία στοιχείων από έναν πίνακα δεδομένων. Κάθε στοιχείο ForEach μετράται ως μία έκφραση στο πλαίσιο του @ViewBuilder.

Δημιουργία προσαρμοσμένου ViewBuilder για επαναχρησιμοποιήσιμα στοιχεία

Προσαρμοσμένος ViewBuilder — είναι μια συνάρτηση ή ιδιότητα χρήστη σχολιασμένη με @ViewBuilder που επιστρέφει some View. Τέτοιες συναρτήσεις επιτρέπουν την ενθυλάκωση σύνθετης λογικής εμφάνισης και την επαναχρησιμοποίησή της σε διαφορετικά μέρη της εφαρμογής.

struct FormRow<Content: View>: View {
    let label: String
    @ViewBuilder let content: Content

    var body: some View {
        HStack {
            Text(label)
                .frame(width: 120, alignment: .trailing)
            content
        }
    }
}

// Χρήση:
FormRow(label: "Name") {
    TextField("Enter name", text: $name)
}

FormRow(label: "Gender") {
    Picker("Select", selection: $gender) {
        Text("Άνδρας").tag(Gender.male)
        Text("Γυναίκα").tag(Gender.female)
    }
}

Σημαντικός κανόνας: η προσαρμοσμένη συνάρτηση με @ViewBuilder πρέπει να επιστρέφει some View, όχι έναν συγκεκριμένο τύπο ή το πρωτόκολλο View. Μόνο ο αδιαφανής τύπος επιτρέπει την απόκρυψη της συγκεκριμένης υλοποίησης και τη διατήρηση της ευελιξίας της σύνθεσης.

Απόδοση: οι προσαρμοσμένες συναρτήσεις @ViewBuilder δεν προσθέτουν επιβάρυνση σε σύγκριση με τον άμεσο κώδικα στο body. Ο μεταγλωττιστής ενσωματώνει τις κλήσεις και βελτιστοποιεί τον προκύπτοντα κώδικα. Ο διαχωρισμός του body σε συναρτήσεις @ViewBuilder βελτιώνει την αναγνωσιμότητα χωρίς απώλεια απόδοσης.