@Binding — co to je, jak funguje a příklady ve SwiftUI

Co je @Binding ve SwiftUI?

@Binding je Property Wrapper, který vytváří obousměrné propojení mezi vlastností uloženou v rodičovském zobrazení a podřízenou komponentou. Hlavní rozdíl mezi Binding a @State: Binding nevlastní data. Pouze čte a zapisuje hodnotu prostřednictvím skutečného zdroje — @State, @StateObject nebo jiného Binding v rodiči. Bez Binding by podřízená zobrazení nemohla měnit stav předka bez callbacků nebo delegátů.

Binding je implementován jako struktura se dvěma vlastnostmi: wrappedValue (aktuální hodnota) a projectedValue (samotný Binding, přístupný přes $). Když podřízené zobrazení změní wrappedValue prostřednictvím Binding, SwiftUI přenese změnu do zdroje dat a překreslí všechna závislá zobrazení. To se děje synchronně v rámci aktuálního cyklu aktualizace.

Důležitá vlastnost: @Binding není omezen na jednodrovňové předávání. Binding lze předávat přes více úrovní hierarchie — každá podřízená komponenta obdrží odkaz na stejný zdroj dat. Změna na jakékoli úrovni způsobí jednotnou aktualizaci všech propojených zobrazení.

Jak funguje obousměrné propojení Binding

Mechanismus obousměrného propojení prostřednictvím @Binding je založen na projekci Property Wrapperů. Když rodič deklaruje @State var value: T, SwiftUI automaticky vygeneruje projekci $value typu Binding. Předáním $value do podřízené komponenty s @Binding var value: T propojíte obě zobrazení s jednou paměťovou buňkou. Jakýkoli zápis prostřednictvím Binding v podřízeném zobrazení způsobí překreslení obou komponent.

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

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

struct SliderView: View {
    @Binding var value: Double

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

V příkladu SliderContainer vlastní @State value a SliderView obdrží Binding prostřednictvím $value. Posuvník uvnitř SliderView je připojen k tomuto Binding. Při přetažení posuvníku Slider změní hodnotu prostřednictvím Binding, což automaticky aktualizuje @State v SliderContainer a obě zobrazení zobrazí aktuální číslo. Celý řetězec funguje bez jediného callbacku nebo oznámení.

Pro vytvoření Binding z @StateObject nebo @ObservedObject se používá stejná projekce: $object.property dává Binding. To umožňuje předávat jednotlivé vlastnosti ObservableObject do podřízených zobrazení bez předávání celého objektu. Tento přístup poskytuje užší propojení a zabraňuje zbytečným překreslením.

@Binding vs callbacky: co vybrat

Před SwiftUI byl standardní způsob předávání změn nahoru hierarchií prostřednictvím callbacků a delegátů: rodič předával closure, podřízená komponenta jej volala při změně. @Binding nabízí alternativu s méně kódem a deklarativnější syntaxí. Místo předávání dokončovacího closure stačí předat $stateValue.

Použijte @Binding, když podřízené zobrazení potřebuje pouze číst a měnit hodnotu. Pokud jsou při změně vyžadovány vedlejší akce (validace, logování, síťový požadavek), kombinujte Binding s callbackem: předávejte Binding pro data a closure pro události. Například TextField se může připojit k Binding a onChange spustí validaci.

Vzory použití @Binding v projektech

@Binding se uplatňuje v několika typických scénářích. První — vlastní ovládací prvky: přepínače, posuvníky, výběry barev a další interaktivní prvky přijímají Binding pro obousměrnou synchronizaci. Druhý — modální okna: příznak zobrazení sheet je předáván jako Binding, což umožňuje podřízenému zobrazení zavřít se prostřednictvím presentationMode nebo přímým nastavením.

Třetí vzor — formuláře s rozdělením. Pokud formulář sestává z mnoha polí, každé pole lze extrahovat do samostatné komponenty přijímající Binding pro svou hodnotu. To zjednodušuje testování a opětovné použití polí mezi různými formuláři. Rodičovská komponenta zůstává jediným vlastníkem celého modelu formuláře.

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

Komponenta FormField přijímá popisek a Binding na řetězec. Zobrazuje štítek a TextField připojený k předanému Binding. Jakýkoli formulář může používat FormField opakovaně předáváním $property pro každé pole. To snižuje duplicitu značek a centralizuje stylování textových polí.

Vytváření vlastních Binding

SwiftUI umožňuje ruční vytváření Binding prostřednictvím inicializátoru Binding(get:set:). To je užitečné, když je třeba přidat logiku při čtení nebo zápisu hodnoty. Můžete například vytvořit Binding, který formátuje číslo před uložením, nebo Binding, který synchronizuje hodnotu se vzdáleným serverem při každé změně.

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

Ve výpisu vlastní emailBinding automaticky převádí text na malá písmena a odstraňuje mezery při každé změně. TextField používá tento Binding místo přímého připojení k $email. Tento přístup umožňuje centralizovat validaci a transformaci dat uvnitř Binding, aniž by se kód zanášel onChange handlerem.

Chyby a antivzory s @Binding

První a nejčastější chyba — předávání hodnoty místo Binding. Pokud podřízená komponenta deklaruje @Binding var text: String a rodič předá text (bez $), kompilátor vyhlásí chybu: Cannot convert value of type 'String' to expected argument type 'Binding'. Řešení — vždy používejte prefix $ při předávání: $text.

Druhá chyba — Binding na data pouze pro čtení. Pokud podřízené zobrazení potřebuje pouze číst hodnotu, nepoužívejte @Binding — stačí obyčejné let nebo @State z rodiče. Binding implikuje možnost zápisu a další práva na změnu komplikují ladění a porušují princip minimálních oprávnění.

Třetí problém — Binding.constant v produkci. Binding.constant(value) vytváří falešné propojení bez zpětné vazby — změny jsou ignorovány. Používejte constant pouze pro prototypování a náhledy (Xcode Previews), ale nikdy v reálném kódu. Pro testy používejte Binding(get:set:) s řízeným chováním.