@Binding — ce este, cum funcționează și exemple în SwiftUI

Ce este @Binding în SwiftUI?

@Binding este un Property Wrapper care creează o legătură bidirecțională între o proprietate stocată în vederea părinte și o componentă copil. Diferența principală dintre Binding și @State: Binding nu deține datele. El doar citește și scrie valoarea prin sursa reală — @State, @StateObject sau un alt Binding din părinte. Fără Binding, vederile copil nu ar putea modifica starea strămoșului fără callbackuri sau delegați.

Binding este implementat ca o structură cu două proprietăți: wrappedValue (valoarea curentă) și projectedValue (Bindingul însuși, accesibil prin $). Când vederea copil modifică wrappedValue prin Binding, SwiftUI transmite schimbarea la sursa de date și redesenează toate vederile dependente. Aceasta se întâmplă sincron în cadrul ciclului curent de actualizare.

Caracteristică importantă: @Binding nu se limitează la transmiterea pe un singur nivel. Binding poate fi transmis prin mai multe niveluri ale ierarhiei — fiecare componentă copil primește o referință la aceeași sursă de date. Modificarea la orice nivel cauzează o actualizare unitară a tuturor vederilor legate.

Cum funcționează legătura bidirecțională Binding

Mecanismul legăturii bidirecționale prin @Binding se bazează pe proiecția Property Wrapperurilor. Când părintele declară @State var value: T, SwiftUI generează automat proiecția $value de tip Binding. Transmițând $value către o componentă copil cu @Binding var value: T, conectezi ambele vederi la o singură celulă de memorie. Orice scriere prin Binding în vederea copil cauzează redesenarea ambelor componente.

struct SliderContainer: View {
    @State private var value: Double = 0.5

    var body: some View {
        VStack {
            Text("Valoare: \(value)")
            SliderView(value: $value)
        }
    }
}

struct SliderView: View {
    @Binding var value: Double

    var body: some View {
        Slider(value: $value, in: 0...1)
    }
}

În exemplu, SliderContainer deține @State value, iar SliderView primește Binding prin $value. Sliderul din interiorul SliderView este legat de acest Binding. La tragerea cursorului, Sliderul modifică valoarea prin Binding, ceea ce actualizează automat @State în SliderContainer și ambele vederi afișează numărul curent. Întregul lanț funcționează fără niciun callback sau notificare.

Pentru a crea Binding din @StateObject sau @ObservedObject se folosește aceeași proiecție: $object.property dă Binding. Aceasta permite transmiterea proprietăților individuale ale ObservableObject către vederile copil fără a transmite întregul obiect. O astfel de abordare oferă o legătură mai strictă și previne redesenele inutile.

@Binding vs callbackuri: ce să alegi

Înainte de SwiftUI, modul standard de a transmite schimbările în susul ierarhiei era prin callbackuri și delegați: părintele transmitea un closure, componenta copil îl apela la modificare. @Binding oferă o alternativă cu mai puțin cod și o sintaxă mai declarativă. În loc să transmiți un closure de completare, este suficient să transmiți $stateValue.

Folosește @Binding când vederea copil are nevoie doar să citească și să modifice valoarea. Dacă sunt necesare acțiuni secundare la modificare (validare, logare, cerere de rețea), combină Binding cu un callback: transmite Binding pentru date și closure pentru evenimente. De exemplu, TextField se poate lega la Binding, iar onChange va porni validarea.

Modele de utilizare @Binding în proiecte

@Binding se aplică în câteva scenarii tipice. Primul — controale personalizate: întrerupătoare, glisiere, selectoare de culoare și alte elemente interactive acceptă Binding pentru sincronizare bidirecțională. Al doilea — ferestre modale: indicatorul de afișare sheet este transmis ca Binding, permițând vederii copil să se închidă prin presentationMode sau setare directă.

Al treilea model — formulare cu divizare. Dacă un formular constă din mai multe câmpuri, fiecare câmp poate fi extras într-o componentă separată care acceptă Binding pentru valoarea sa. Aceasta simplifică testarea și reutilizarea câmpurilor între diferite formulare. Componenta părinte rămâne singurul deținător al întregului model al formularului.

struct FormField: View {
    let title: String
    @Binding var text: String

    var body: some View {
        VStack(alignment: .leading) {
            Text(title).font(.caption)
            TextField("Enter \(title.lowercased())", text: $text)
                .textFieldStyle(.roundedBorder)
        }
    }
}

Componenta FormField primește o etichetă și un Binding la un șir. Afișează o etichetă și un TextField legat de Bindingul transmis. Orice formular poate folosi FormField de mai multe ori, transmițând $property pentru fiecare câmp. Aceasta reduce duplicarea marcajului și centralizează stilizarea câmpurilor text.

Crearea Bindingurilor personalizate

SwiftUI permite crearea manuală a Binding prin inițializatorul Binding(get:set:). Acest lucru este util când trebuie adăugată logică la citirea sau scrierea valorii. De exemplu, poți crea un Binding care formatează un număr înainte de salvare, sau un Binding care sincronizează valoarea cu un server la distanță la fiecare modificare.

struct ValidatedField: View {
    @State private var email: String = ""

    var emailBinding: Binding<String> {
        .init(
            get: { email },
            set: { email = $0.lowercased().trimmingCharacters(in: .whitespaces) }
        )
    }

    var body: some View {
        TextField("Email", text: emailBinding)
    }
}

În listing, emailBinding personalizat convertește automat textul la litere mici și elimină spațiile la fiecare modificare. TextField folosește acest Binding în locul legăturii directe la $email. O astfel de abordare permite centralizarea validării și transformării datelor în interiorul Bindingului, fără a aglomera codul cu handlere onChange.

Erori și antipatternuri cu @Binding

Prima și cea mai răspândită eroare — transmiterea valorii în locul Bindingului. Dacă o componentă copil declară @Binding var text: String, iar părintele transmite text (fără $), compilatorul va da eroarea: Cannot convert value of type 'String' to expected argument type 'Binding'. Soluția — folosește întotdeauna prefixul $ la transmitere: $text.

A doua eroare — Binding pe date read-only. Dacă vederea copil are nevoie doar să citească valoarea, nu folosi @Binding — este suficient un simplu let sau @State din părinte. Binding implică posibilitatea de scriere, iar drepturile suplimentare de modificare complică depanarea și încalcă principiul privilegiilor minime.

A treia problemă — Binding.constant în producție. Binding.constant(value) creează o legătură falsă fără feedback — modificările sunt ignorate. Folosește constant doar pentru prototipare și previzualizări (Xcode Previews), dar niciodată în codul real. Pentru teste, folosește Binding(get:set:) cu comportament controlat.