Die List in Swift UI - Teil 5 - Listenelemente hinzufügen
Mit der nächsten Erweiterung soll die Anwendung die Fähigkeit bekommen, zusätzliche Personen zu List hinzuzufügen. Auf ein Eingabeformular wird dabei verzichtet. Es werden weitere zufällige Personen erzeugt. Im ersten Schritt muss die Klasse PersonsRepository um eine Funktion erweiterte werden, welche diese Aufgabe übernimmt. Die Funktion soll addRandomPerson heißen. Sie fügt neue Instanzen jedoch nicht am Ende des Array mit append ein, sondern am Anfang der Auflistung mit insert und dem Parameter at: 0.
import SwiftUI
public class PersonsRepository : ObservableObject {
@Published var persons = [Person]()
init(randomPersonsCount : Int) {
for _ in 0..<randomPersonsCount {
self.persons.append(RandomPersonGenerator.shared.generate())
}
}
func addRandomPerson() {
self.persons.insert(RandomPersonGenerator.shared.generate(), at: 0)
}
}
Viele iOS-Apps, die mit einem List-Steuerelement arbeiten, verwenden Schaltflächen in der Navigationsleiste, um zusätzliche Elemente einzufügen. In SwiftUI wird das durch den Modifier navigationBarItems umgesetzt, der wiederum die Steuerelemente einkapselt, die in der Navigationsleiste angezeigt werden. Im folgenden Code ist das ein Button, der ein Symbol anzeigt. Vom Button aufgerufen wird die zuvor im Repository definierte Funktion addRandomPerson.
import SwiftUI
struct ContentView: View {
@ObservedObject var repo = PersonsRepository(randomPersonsCount: 10)
init() {
let customAppearance = UINavigationBarAppearance()
// Backgroundcolor
customAppearance.backgroundColor = UIColor.lightGray
// Font color for navigationBarTitleDisplayMode large
customAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
// Font color for navigationBarTitleDisplayMode inline
customAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().standardAppearance = customAppearance
UINavigationBar.appearance().compactAppearance = customAppearance
UINavigationBar.appearance().scrollEdgeAppearance = customAppearance
}
var body: some View {
NavigationView {
List {
ForEach(self.repo.persons, id: \.id) { person in
NavigationLink (destination: PersonDetailView(person: person))
{
PersonListCell(person: person)
}
}
}.listStyle(PlainListStyle())
.navigationTitle("List and People")
.navigationBarTitleDisplayMode(.large)
.navigationBarItems(trailing:
Button(action: {
self.repo.addRandomPerson()
}) {
Image(systemName: "plus.circle.fill")
} )
}
}
}
Wo der Button in der Navigationsleiste angezeigt wird, bestimmt der erste Parameter der navigationBarItems. Mit trailing erreicht man eine Anzeige auf der rechten Seite, bei leading würde der Button links angezeigt. Eine Navigationsleiste könnte auch auf beiden Seiten Schaltflächen haben. Das sähe im Code so aus:
.navigationBarItems(leading:
Button(action: {print("Button links")} )
{ Image(systemName: "plus.bubble.fill") }
, trailing:
Button(action: {print("Button rechts")} )
{ Image(systemName: "plus.circle.fill") }
)
Weitere Änderungen sind am Programm nicht erforderlich. Sobald der Button betätig wird, erscheint ein neuer Eintrag am Anfang der Liste. Das ist auf den Umstand zurückzuführen, dass das Array persons mit @published ausgezeichnet wurde. Änderungen an dem Array werden so automatisch von der View aktualisiert. Das ist der große Vorteil eines ObservedObject. Sobald die Datenmodelle eine Änderung melden, wird die View neu aufgebaut. In der Vergangenheit mussten sich Entwickler um solche Mechanismen noch selbst kümmern. Momentan hat die Apps ein wenig vorteilhaftes Farbeschema, denn das Symbol der Schaltfläche wird in blauer Farbe angezeigt. Somit ist es auf dem grauem Hintergrund der Navigationsleiste nur schwer zu erkennen. Die blaue Farbe ist der Defaultwert für neue Projekte, aber die Farbe kann geändert werden. Der Weg führt über die Assets im Project Navigator und dann zur AccentColor. Über den Attributes Inspector kann hier eine neue Farbe bestimmt werden. Für den grauen Hintergrund gut geeignet ist eine weiße Farbe. Das betrifft das neu eingefügte Symbol sowie den »Zurück«-Button mit dem von der Detailansicht wieder zur Liste zurückkehrt.
Geschrieben am: 06.07.2021 Technologien: SwiftUI, List