Menu Close

SwiftUI 02 – Personen Liste v2

Es gibt eine bessere Variante, um eine Liste von Personen in SwiftUI darzustellen. In dem man ein Swift Model erstellt. Das gute daran ist, man kann auf die Daten, in verschiedenen SwiftUI Dateien zu greifen. In dieser Version werden zwei SwiftUI Dateien verwendet. [ContenView.swift, PersonDetail.swift]


    // *SwiftUI Personen Liste version 2*
    // 
    //  Persons.swift
    //  (Swift Model)
            
    import Foundation
    import SwiftUI

    struct Persons : Identifiable {
        let id = UUID() 
        let image: String                 
        let name: String 
        let job: String 
        let describe: String            
    }

    extension Persons {
        static func personList() -> [Persons] {
            return [
                Persons(image: "avatar01", name: "David Koenig", job: "Swift Developer", describe: "I like Swift now for 5 years!"),
                Persons(image: "avatar02", name: "Helen Baker", job: "Art Design", describe: "I can live my creativity!"),
                Persons(image: "avatar03", name: "Will Bruce", job: "Web Developer", describe: "Development is not everytime easy, but I have fun!")
            ]
        }
    }



Oben wurde eine Persons Swift Datei erstellt. Es wird ein struct von Persons erstellt und in der unten stehenden Erweiterung des struct, befinden sich die Beispiele aus der ersten Version. Es wird außerdem eine ID verwendet, die einmalig ist -> UUID!


    // *SwiftUI Personen Liste version 2*
    // 
    //  ContentView.swift
    //  SwiftUI_PersonList
 
    import SwiftUI

    struct ContentView : View {

        let persons = Persons.personList()

        var body: some View {
            NavigationView {
                List(persons) { person in 
                    NavigationLink(destination: PersonDetail(persons: person)) {
                        HStack {
                            Image(person.image)
                                .clipShape(Circle())
                                .overlay(Circle().stroke(Color.blue, lineWidth: 2))
                            VStack(alignment: .leading) {
                                Text(person.name).foregroundColor(.red)
                                    .font(.title)
                                Text(person.job).foregroundColor(.blue)
                                    .font(.subheadline)
                            }.padding(.leading, 10.0) 
                        }
                    }
                }   
                .navigationBarTitle(Text("Persons"))
            }
        }
    }

    #if DEBUG
    struct ContentView_Previews : PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    #endif 
    

Im weiteren oben stehenden Code, ähnlich wie in Version Eins, wird die Persons Swift Datei verwendet und ordnen die Daten der Liste zu. Ebenfalls wird die Navigation verwendet, um genaueres über die Personen zu erfahren und in einen anderen View (PersonDetail) zu kommen!


    // *SwiftUI Personen Liste version 2*
    // 
    //  PersonDetail.swift
    //  SwiftUI_PersonList
                 
    import SwiftUI
                  
    struct PersonDetail : View {

        let persons = Persons

        var body: some View {
            NavigationView {
                ZStack(alignment: .center) {
                    Image(persons.image)
                        .resizable()
                        .frame(width: 280, height: 280)
                        .cornerRadius(20)
                        .shadow(radius: 15)
                        .offset(x: 0, y: -80)
                    Text(persons.name)
                        .padding(.horizontal, 8.0)
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .shadow(radius: 50) 
                        .background(Color.gray)
                        .cornerRadius(10)      
                    Text(persons.job).foregroundColor(.blue)
                        .font(.title)
                        .offset(x: 0, y: 120)
                    Text(persons.describe).foregroundColor(.blue)
                        .font(.headline)
                        .lineLimit(5)
                        .offset(x: 0, y: 180)
                }       
            }.navigationBarTitle(Text(persons.name), displayMode: .inline)
        }
    }
                
    #if DEBUG
    struct ContentView_Previews : PreviewProvider {
        static var previews: some View {
           PersonDetail(Persons(image: "avatar01", name: "David Koenig", job: "Swift Developer", 
                            describe: "I like Swift now for 5 years!"))
        }
    }
    #endif 


    

Das PersonDetail.swift View, oben stehend, wird keine Liste verwendet. Sondern ein einfaches View, in dem man Daten aus der Liste darstellt und zusätzlich die Beschreibung der Personen. Auch in diesem View kann man die Preview (macOS Beta Catalina) aktivieren, wie im unteren letzten struct zu sehen ist. Für die Preview, sind Beispiel Daten zu verwenden, diese Daten sind nur für die Preview zu beachten. Hat nichts mit dem wahrem Verhalten der App zu tun!

Endresultat

Wie im obigen Bild zu sehen ist, wird man von einer Liste zu einem anderen View geleitet und wenn man will zurück.

Hier ist das komplette Projekt zu finden: https://github.com/DKoenig82/swiftui_swiftyking

Related Posts

Diese Seite verwendet Cookies, um die Nutzerfreundlichkeit zu verbessern. Mit der weiteren Verwendung stimmst du dem zu. Datenschutzerklärung