Die List in Swift UI - Teil 3 - Benutzerdefinierte Listenelemente
Ein Element einer List muss nicht ein zwangsläufig mit nur einem Steuerelement angezeigt werden. Ohne Probleme sind dort komplexe Strukturen aus verschachtelten Stacks möglich. Oft ist es sogar von Vorteil, das Design des Listeneintrags in eine eigene View auszulagern. Das erhöht die Lesbarkeit und die Wiederverwendbarkeit. Das nächste Listing zeigt die View PersonListCell, die zusätzlich zum Vornamen und Nachnamen das Geburtsdatum anzeigt. Außerdem kommen verschiedene Schriftgrößen und Textfarben zum Einsatz.
struct PersonListCell: View {
var person : Person
var body: some View {
VStack {
HStack {
Text("\(person.firstName) \(person.lastName)")
.font(.title)
Spacer()
}
HStack {
Text("\(person.birthday.formatted(.dateTime.year().month().day()))")
.font(.body).foregroundColor(.secondary)
Spacer()
}
}.padding(EdgeInsets(top: 1, leading: 5, bottom: 1, trailing: 0))
}
}
Diese Struktur benötig zur Initialisierung eine Person, die von außen übergeben werden muss. In der List wird das ein Eintrag aus dem Repository sein. Jedoch benötigt auch die Vorschau innerhalb von Xcode eine Person, um die View anzeigen zu können. Glücklicherweise kann der statische RandomPersonGenerator jederzeit die benötige Person erzeugen.
struct PersonListCell_Previews: PreviewProvider {
static var previews: some View {
PersonListCell(person: RandomPersonGenerator.shared.generate())
}
}
In der List muss anschließend nur das Text-Steuerelement durch die neu erstellte View PersonListCell ersetzt werden. Wie zuvor erwähnt, wird der View jedes Listeneintrags jeweils eine Person übergeben. Zusätzlich wurde im folgenden Code der List ein Stil hinzugefügt. Der PlainListStyle sorgt dafür, dass die Listenelemente die komplette Breite der View einnehmen. Es gibt dann keine Abstände mehr zum linken und rechten Rand.
import SwiftUI
struct ContentView: View {
@ObservedObject var repo = PersonsRepository(randomPersonsCount: 10)
var body: some View {
List {
ForEach(self.repo.persons, id: \.id) { person in
PersonListCell(person: person)
}
}.listStyle(PlainListStyle())
}
}
Geschrieben am: 05.07.2021 Technologien: SwiftUI, List