@Binding — какво е, как работи и примери в SwiftUI

Какво е @Binding в SwiftUI?

@Binding е Property Wrapper, който създава двупосочна връзка между свойство, съхранявано в родителския изглед, и детски компонент. Основната разлика между Binding и @State: Binding не притежава данни. Той само чете и записва стойността чрез истинския източник — @State, @StateObject или друг Binding в родителя. Без Binding, детските изгледи не биха могли да променят състоянието на предшественика без колбеци или делегати.

Binding е имплементиран като структура с две свойства: wrappedValue (текуща стойност) и projectedValue (самият Binding, достъпен чрез $). Когато детският изглед промени wrappedValue чрез Binding, SwiftUI предава промяната към източника на данни и прерисува всички зависими изгледи. Това се случва синхронно в рамките на текущия цикъл на обновяване.

Важна характеристика: @Binding не се ограничава до еднонивово предаване. Binding може да се предава през няколко нива на йерархията — всеки детски компонент получава референция към същия източник на данни. Промяна на всяко ниво предизвиква единно обновяване на всички свързани изгледи.

Как работи двупосочната връзка Binding

Механизмът на двупосочна връзка чрез @Binding се основава на проекцията на Property Wrapper-ите. Когато родителят декларира @State var value: T, SwiftUI автоматично генерира проекцията $value от тип Binding. Предавайки $value на детски компонент с @Binding var value: T, свързвате двата изгледа с една клетка памет. Всяко записване чрез Binding в детския изглед предизвиква прерисуване на двата компонента.

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

    var body: some View {
        VStack {
            Text("Стойност: \(value)")
            SliderView(value: $value)
        }
    }
}

struct SliderView: View {
    @Binding var value: Double

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

В примера SliderContainer притежава @State value, а SliderView получава Binding чрез $value. Плъзгачът вътре в SliderView е свързан с този Binding. При плъзгане на контролата, Slider променя стойността чрез Binding, което автоматично обновява @State в SliderContainer, и двата изгледа показват актуалното число. Цялата верига работи без нито един колбек или уведомление.

За създаване на Binding от @StateObject или @ObservedObject се използва същата проекция: $object.property дава Binding. Това позволява предаване на отделни свойства на ObservableObject на детски изгледи без предаване на целия обект. Такъв подход дава по-тясно свързване и предотвратява ненужни прерисувания.

@Binding vs колбеци: какво да изберем

Преди SwiftUI стандартният начин за предаване на промени нагоре по йерархията беше чрез колбеци и делегати: родителят предаваше затваряне, детският компонент го извикваше при промяна. @Binding предлага алтернатива с по-малко код и по-декларативен синтаксис. Вместо да предавате затваряне за завършване, достатъчно е да предадете $stateValue.

Използвайте @Binding, когато детският изглед трябва само да чете и променя стойността. Ако са необходими странични действия при промяна (валидация, логване, мрежова заявка), комбинирайте Binding с колбек: предайте Binding за данни и затваряне за събития. Например TextField може да се свърже с Binding, а onChange ще стартира валидация.

Модели на използване на @Binding в проекти

@Binding се прилага в няколко типични сценария. Първи — персонализирани контроли: ключове, плъзгачи, избирачи на цвят и други интерактивни елементи приемат Binding за двупосочна синхронизация. Втори — модални прозорци: флагът за показване на sheet се предава като Binding, позволявайки на детския изглед да се затвори чрез presentationMode или директно задаване.

Трети модел — формуляри с разделяне. Ако формулярът се състои от много полета, всяко поле може да бъде извлечено в отделен компонент, който приема Binding за своята стойност. Това опростява тестването и повторното използване на полета между различни формуляри. Родителският компонент остава единственият собственик на целия модел на формуляра.

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

Компонентът FormField приема етикет и Binding към низ. Той показва надпис и TextField, свързан с предадения Binding. Всеки формуляр може да използва FormField многократно, предавайки $property за всяко поле. Това намалява дублирането на маркировка и централизира стилизирането на текстовите полета.

Създаване на персонализирани Binding

SwiftUI позволява ръчно създаване на Binding чрез инициализатора Binding(get:set:). Това е полезно, когато трябва да се добави логика при четене или запис на стойността. Например можете да създадете Binding, който форматира число преди запазване, или Binding, който синхронизира стойността с отдалечен сървър при всяка промяна.

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

В листинга персонализираният emailBinding автоматично преобразува текста в малки букви и премахва интервали при всяка промяна. TextField използва този Binding вместо директно свързване с $email. Такъв подход позволява централизиране на валидацията и трансформацията на данни вътре в Binding, без да замърсява кода с onChange манипулатори.

Грешки и антимодели с @Binding

Първата и най-често срещана грешка — предаване на стойност вместо Binding. Ако детски компонент декларира @Binding var text: String, а родителят предава text (без $), компилаторът ще даде грешка: Cannot convert value of type 'String' to expected argument type 'Binding'. Решение — винаги използвайте префикс $ при предаване: $text.

Втора грешка — Binding върху данни само за четене. Ако детският изглед трябва само да чете стойността, не използвайте @Binding — достатъчно е обикновено let или @State от родителя. Binding предполага възможност за запис, а допълнителните права за промяна усложняват отстраняването на грешки и нарушават принципа на минималните привилегии.

Трети проблем — Binding.constant в продукция. Binding.constant(value) създава фалшиво свързване без обратна връзка — промените се игнорират. Използвайте constant само за прототипиране и прегледи (Xcode Previews), но никога в реален код. За тестове използвайте Binding(get:set:) с контролирано поведение.