Seite 2: Optimierungen und Favoriten

Beim Testen der App ist womöglich ein Fehler aufgefallen: Öffnen Entwickler eine bestehende Notiz und ändern den Titel, hat die Änderung keine Auswirkungen auf den zugehörigen Titel in der Listenansicht. Das liegt daran, dass die Zellen bisher bei Aktualisierung des Titels keinen Refresh durchführen. Ihnen wird der Titel lediglich einmalig bei der Initialisierung zugewiesen und er bleibt dann so dauerhaft bestehen.

Um das zu ändern, muss man die note-Property der NoteCell-View als Status deklarieren, der maßgeblich für das Erscheinungsbild der Zelle verantwortlich ist. Dazu versieht man – genau wie bei NoteView – die note-Property mit dem @ObservedObject-Property-Wrapper. Ändert sich nun eine der mittels @Published deklarierten Eigenschaften der zugehörigen Note-Instanz, wird auch die Zelle automatisch entsprechend aktualisiert. Das Verhalten benötigen Entwickler gleich ebenfalls noch zur korrekten Kennzeichnung von Favoriten. Den finalen Stand der NoteCell-Structure zeigt Listing 3:

// Listing 3: Konfiguration der note-Property als @ObservedObject
struct NoteCell: View {
    @ObservedObject var note: Note
    
    var body: some View {
        HStack {
            Text(note.title)
            if note.isFavorite {
                Spacer()
                Image(systemName: "star.fill")
            }
        }

Nun kümmert man sich zum Abschluss noch darum, die erstellten Notizen optional als Favoriten zu kennzeichnen. Dazu ergänzen Entwickler ein passendes Bar-Button-Item am oberen rechten Rand der NoteView. Das wird immer dann angezeigt, wenn eine Notiz aus der Liste ausgewählt wird (beim Erstellen wird es durch die Speichern-Schaltfläche verdeckt, doch das soll in diesem Beispiel nicht stören).

Den Button setzen Entwickler mit einer eigenen View namens FavoriteButton um. Über einen Status definieren sie dessen Aussehen, indem sie entweder einen gefüllten (für einen Favoriten) oder einen nicht ausgefüllten Stern anzeigen. Durch Tap auf den Button wird dieser Status invertiert. Die Implementierung des FavoriteButton findet man in Listing 4:

// Listing 4: Umsetzung des FavoriteButton
struct FavoriteButton: View {
    @Binding var isFavorite: Bool
    
    var body: some View {
        Button(action: {
            self.isFavorite.toggle()
        }) {
            Image(systemName: self.isFavorite ? "star.fill" : "star")
        }
    }
}

Den Button bindet man nun innerhalb der Navigation-Bar der NoteView[code] ein. Als Binding übergeben Entwickler die [code]isFavorite-Eigenschaft der zugrundeliegenden Notiz. Die so finale Implementierung von NoteView zeigt Listing 5:

// Listing 5: Einbinden des FavoriteButton
struct NoteView: View {
    @ObservedObject var note: Note
    
    var body: some View {
        VStack {
            TextField("Title", text: $note.title)
            TextView(text: $note.content)
                .border(Color.gray, width: 1)
        }
        .navigationBarItems(trailing: FavoriteButton(isFavorite: $note.isFavorite))
        .navigationBarTitle(note.title)
        .padding()
    }
}

Damit ist die kleine Beispiel-App zum Erstellen von Notizen abgeschlossen. Notizen lassen sich nun über den neuen FavoriteButton als Favoriten kennzeichnen, was auch Auswirkungen auf die Darstellung innerhalb der Listenansicht hat (s. Abb. 2).