@Binding — wat is het, hoe werkt het en voorbeelden in SwiftUI

Wat is @Binding in SwiftUI?

@Binding is een Property Wrapper die een tweerichtingsverbinding creëert tussen een eigenschap opgeslagen in de ouderaanzicht en een kindcomponent. Het belangrijkste verschil tussen Binding en @State: Binding heeft geen eigendom van gegevens. Het leest en schrijft alleen de waarde via de echte bron — @State, @StateObject of een andere Binding in de ouder. Zonder Binding zouden kindweergaven de toestand van de voorouder niet kunnen wijzigen zonder callbacks of delegaten.

Binding is geïmplementeerd als een structuur met twee eigenschappen: wrappedValue (huidige waarde) en projectedValue (de Binding zelf, toegankelijk via $). Wanneer een kindweergave wrappedValue wijzigt via Binding, stuurt SwiftUI de wijziging door naar de gegevensbron en hertekent alle afhankelijke weergaven. Dit gebeurt synchroon binnen de huidige updatecyclus.

Belangrijk kenmerk: @Binding is niet beperkt tot een enkel niveau. Binding kan door meerdere niveaus van de hiërarchie worden doorgegeven — elke kindcomponent ontvangt een verwijzing naar dezelfde gegevensbron. Een wijziging op elk niveau veroorzaakt een uniforme update van alle gekoppelde weergaven.

Hoe werkt de tweerichtingsverbinding van Binding

Het mechanisme van tweerichtingsverbinding via @Binding is gebaseerd op de projectie van Property Wrappers. Wanneer de ouder @State var value: T declareert, genereert SwiftUI automatisch de projectie $value van het type Binding. Door $value door te geven aan een kindcomponent met @Binding var value: T, verbind je beide weergaven met één geheugencel. Elke schrijfactie via Binding in de kindweergave veroorzaakt het hertekenen van beide componenten.

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

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

struct SliderView: View {
    @Binding var value: Double

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

In het voorbeeld heeft SliderContainer @State value, en SliderView ontvangt Binding via $value. De Slider binnen SliderView is gekoppeld aan deze Binding. Bij het verslepen van de schuifregelaar wijzigt Slider de waarde via Binding, wat automatisch @State in SliderContainer bijwerkt en beide weergaven het huidige getal tonen. De hele keten werkt zonder een enkele callback of melding.

Voor het maken van Binding uit @StateObject of @ObservedObject wordt dezelfde projectie gebruikt: $object.property geeft Binding. Dit maakt het mogelijk om afzonderlijke eigenschappen van ObservableObject door te geven aan kindweergaven zonder het hele object door te geven. Deze benadering geeft een nauwere koppeling en voorkomt onnodig hertekenen.

@Binding vs callbacks: wat te kiezen

Vóór SwiftUI was de standaardmanier om wijzigingen omhoog in de hiërarchie door te geven via callbacks en delegaten: de ouder gaf een closure door, de kindcomponent riep deze aan bij een wijziging. @Binding biedt een alternatief met minder code en een meer declaratieve syntaxis. In plaats van een voltooiingsclosure door te geven, is het voldoende om $stateValue door te geven.

Gebruik @Binding wanneer de kindweergave alleen de waarde hoeft te lezen en wijzigen. Als er nevenacties nodig zijn bij wijziging (validatie, loggen, netwerkverzoek), combineer Binding dan met een callback: geef Binding door voor gegevens en een closure voor gebeurtenissen. TextField kan bijvoorbeeld worden gekoppeld aan Binding, en onChange start de validatie.

Gebruikspatronen van @Binding in projecten

@Binding wordt toegepast in verschillende typische scenario's. Ten eerste — aangepaste besturingselementen: schakelaars, schuifregelaars, kleurkiezers en andere interactieve elementen accepteren Binding voor tweerichtingssynchronisatie. Ten tweede — modale vensters: de weergavevlag sheet wordt doorgegeven als Binding, waardoor de kindweergave zichzelf kan sluiten via presentationMode of directe instelling.

Het derde patroon — formulieren met opsplitsing. Als een formulier uit meerdere velden bestaat, kan elk veld worden geëxtraheerd naar een aparte component die Binding voor zijn waarde accepteert. Dit vereenvoudigt het testen en hergebruik van velden tussen verschillende formulieren. De oudercomponent blijft de enige eigenaar van het hele formuliermodel.

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)
        }
    }
}

De component FormField accepteert een label en een Binding naar een string. Het toont een bijschrift en TextField gekoppeld aan de doorgegeven Binding. Elk formulier kan FormField meerdere keren gebruiken door $property voor elk veld door te geven. Dit vermindert het dupliceren van opmaak en centraliseert de styling van tekstvelden.

Aangepaste Binding maken

SwiftUI maakt het mogelijk om handmatig Binding te maken via de initialisator Binding(get:set:). Dit is handig wanneer logica moet worden toegevoegd bij het lezen of schrijven van een waarde. Je kunt bijvoorbeeld een Binding maken die een getal formatteert vóór opslag, of een Binding die de waarde bij elke wijziging synchroniseert met een externe server.

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)
    }
}

In de listing converteert aangepaste emailBinding automatisch tekst naar kleine letters en verwijdert spaties bij elke wijziging. TextField gebruikt deze Binding in plaats van directe koppeling aan $email. Deze benadering maakt het mogelijk om validatie en gegevenstransformatie te centraliseren binnen de Binding, zonder de code te vervuilen met onChange-handlers.

Fouten en antipatronen met @Binding

De eerste en meest voorkomende fout — waarde doorgeven in plaats van Binding. Als een kindcomponent @Binding var text: String declareert en de ouder geeft text door (zonder $), geeft de compiler een fout: Cannot convert value of type 'String' to expected argument type 'Binding'. Oplossing — gebruik altijd het $-voorvoegsel bij het doorgeven: $text.

De tweede fout — Binding op alleen-lezen gegevens. Als de kindweergave alleen de waarde hoeft te lezen, gebruik dan geen @Binding — een gewone let of @State van de ouder is voldoende. Binding impliceert schrijfmogelijkheid en extra wijzigingsrechten bemoeilijken het debuggen en schenden het principe van minimale privileges.

Het derde probleem — Binding.constant in productie. Binding.constant(value) creëert een dummy-koppeling zonder terugkoppeling — wijzigingen worden genegeerd. Gebruik constant alleen voor prototypen en voorvertoningen (Xcode Previews), maar nooit in echte code. Gebruik voor tests Binding(get:set:) met gecontroleerd gedrag.