SwiftUI in der Praxis – Teil 4

Binding selbst definieren

Bindings gehören zu den wichtigsten und spannendsten neuen Techniken, die das SwiftUI-Framework mit sich bringt. In der Regel ist ihr Einsatz unkompliziert und sorgt dafür, Daten als Managed Reference an eine andere View zu übergeben, ohne diese Daten kopieren und selbst synchron halten zu müssen; genau jene Aufgabe übernimmt schließlich das Binding für uns.

Es gibt aber Szenarien, in denen das einfache Übergeben einer Source of Truth an eine Binding-Property nicht funktioniert. Ein simples Beispiel dazu seht ihr im folgenden Listing.

struct ContentView: View {
    @State private var selectedDate: Date?
    
    var body: some View {
        // Fehler: selectedDate ist ein Optional.
        DatePicker(selection: $selectedDate, label: {
            Text("Date")
        })
        .padding()
    }
}

Die Basis darin stellen ein Date-Picker und eine State-Property dar. Die State-Property speichert eine Instanz vom Typ Date, ist aber als Optional deklariert; der Status kann also auch nil entsprechen.

Und genau dieser Umstand ist das Problem. Denn Instanzen vom Typ DatePicker benötigten ein Binding auf Basis eines Date; und das darf nicht optional sein! Entsprechend kann die State-Property so nicht dem Date-Picker übergeben werden.

Was also tun? Die Lösung besteht darin, ein eigenes Binding mithilfe des Binding-Typs zu erstellen. Ähnlich einer Computed Property definiert man hierbei selbst, welcher Wert beim Zugriff auf das Binding zurückgegeben wird und was beim Setzen eines neuen Werts geschieht.

Das folgende Listing zeigt, wie man ein passendes Binding für den Date-Picker selbst programmatisch erzeugt. Wichtig ist hierbei, explizit den Typ anzugeben, der für die Werte des Bindings bestimmt ist; in diesem Fall also Date.

let selectedDateBinding = Binding<Date>(get: {
    if self.selectedDate != nil {
        return self.selectedDate!
    }
    return Date()
}, set: {
    self.selectedDate = $0
})

Über den Initializer von Binding gibt man an, was beim Lesen und Schreiben des Bindings geschehen soll; dazu sind die beiden Parameter get beziehungsweise set da.

In dem anfangs beschriebenen Beispiel lässt sich das Problem der optionalen State-Property wie folgt lösen: Nur, wenn die State-Property über einen Wert verfügt, wird eben der mittels Binding weitergegeben, andernfalls schlicht das aktuelle Datum. Das stellt sicher, dass der Date-Picker immer einen validen Wert erhält, so wie es in der zugehörigen Structure definiert ist und vorausgesetzt wird.

Die Implementierung des Setter unseres eigenen Bindings ist noch einfacher. So soll ein über den Date-Picker ausgewählter Wert schlicht direkt der State-Property zugewiesen werden.

Um also das Anfangsbeispiel funktionsfähig zu machen, zeigt das folgende Listing noch einmal das Zusammenspiel zwischen View und Einbindung des eigenen Bindings. Letzteres wird hierbei als Teil der body-Property umgesetzt. Das Binding wird dann direkt dem Picker als Parameter übergeben.

struct ContentView: View {
    @State private var selectedDate: Date?
    
    var body: some View {
        let selectedDateBinding = Binding<Date>(get: {
            if self.selectedDate != nil {
                return self.selectedDate!
            }
            return Date()
        }, set: {
            self.selectedDate = $0
        })
        return DatePicker(selection: selectedDateBinding, label: {
            Text("Date")
        })
        .padding()
    }
}

Fazit

In Szenarien wie den in diesem Artikel beschriebenen reicht das „einfache“ Binding-Konzept nicht mehr aus. Erfreulicherweise ist es aber ohne Probleme möglich, eigene Bindings auf Basis des Binding-Typs zu definieren, für die sich exakt festlegen lässt, was beim Zugriff auf das Binding geschehen soll. Das lässt sich auch mit zusätzlichen Aktionen verknüpfen, um beispielsweise beim Setzen eines Werts mittels Binding weitere Funktionen auszuführen.

Euer Thomas

Bisherige Artikel in dieser Serie

• Teil 1: Buttons in Listenzellen einbinden
• Teil 2: Sheet modal einblenden
• Teil 3: Alerts in SwiftUI