SwiftUI : aide-mémoire

List

Liste simple

// L'écran
struct ContentView: View {
    
    // Noms à afficher dans la liste
    let names = ["Pierre", "Paul", "Jacques"]
    
    var body: some View {
        
        // Composant List
        List{
            // Parcours de la liste de noms
            ForEach(names, id:\.self) { name in
                // Affichage de chaque nom du tableau
                Text(name)
            }
        }
}

Liste d’éléments identifiables

// Modélisation d'une personne
struct Person: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
}

// L'écran
struct ContentView: View {
    
    // Tableau de personnes à afficher dans la liste
    let persons = [
        Person(name: "Pierre", age: 12),
        Person(name: "Paul", age: 32),
        Person(name: "Jacques", age: 8)
    ]
    
    var body: some View {
        
        // Composant List qui affiche les personnes du tableau "persons"
        List(persons){ person in
            Text("\(person.name): \(person.age) years old.")
        }
        
    }
}

Liste avec cellules personnalisées (extracted view)

// Modélisation d'une personne
struct Person: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let icon: String
}

// Cellule personnalisée permettant d'afficher les infos d'une personne
struct PersonRow: View {

    let personToDisplay: Person // Personne à afficher
    
    var body: some View {
        HStack {
            Image(systemName: personToDisplay.icon)
            Text("\(personToDisplay.name) \(personToDisplay.age)")
        }
    }
}

// L'écran
struct ContentView: View {
    
    // Tableau de personnes à afficher dans la liste
    let persons = [
        Person(name: "Pierre", age: 12, icon: "hare"),
        Person(name: "Paul", age: 32, icon: "paperplane"),
        Person(name: "Jacques", age: 8, icon: "clock")
    ]
    
    var body: some View {
        
        // Composant List qui affiche les personnes du tableau "persons"
        List(persons){ person in
            PersonRow(personToDisplay: person)
        }
        
    }
}

Navigation

Navigation hiérarchique

• 

• 

// L'écran
struct ContentView: View {
    
    var body: some View {
       
        // NavigationView qui gère la navigation vers d'autres views
        NavigationView {
            // Lien vers l'écran DetailsView
            NavigationLink(destination: DetailsView(), label: {
                // Apparence du lien (texte, couleur...etc)
                Text("Go to details view")
            })
        }
    }

}

// View vers laquelle il faut naviguer
struct DetailsView: View {
    
    var body: some View {
        Text("This is the Details View")
    }
    
}

Navigation hiérarchique dans un composant List

• 

• 

// Modélisation d'une personne
struct Person: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let icon: String
}

// Cellule personnalisée permettant d'afficher les infos d'une personne
struct PersonRow: View {

    let personToDisplay: Person // Personne à afficher
    
    var body: some View {
        HStack {
            Image(systemName: personToDisplay.icon)
            Text("\(personToDisplay.name) \(personToDisplay.age)")
        }
    }
}

// L'écran de la liste de personnes
struct ContentView: View {
    
    // Tableau de personnes à afficher dans la liste
    let persons = [
        Person(name: "Pierre", age: 12, icon: "hare"),
        Person(name: "Paul", age: 32, icon: "paperplane"),
        Person(name: "Jacques", age: 8, icon: "clock")
    ]
    
    var body: some View {

        // NavigationView qui gère la navigation vers d'autres views
        NavigationView{
            // Composant List pour afficher les personnes du tableau persons
            List(persons){ person in
                // Pour chaque personne du tableau,
                // création d'un lien qui mène vers son détails 
                // en fournissant à la view PersonDetails la personne à afficher
                NavigationLink(destination: PersonDetails(person: person), label: {
                    PersonRow(personToDisplay: person)
                })
            }
        }
        
    }
}

// Ecran (View) qui permet d'afficher le détails d'une personne
struct PersonDetails: View {
    var person: Person
    var body: some View {
        PersonRow(personToDisplay: person)
    }
}


Navigation en silo : TabView

• 

• 

• 

// Ecran principal contenant la TabView
struct MainView: View {
    
    var body: some View {
        
        TabView {
            
            // Premier élément de la TabView, montre le premier écran
            FirstView()
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("First")
            }
            
            // Second élément de la TabView, montre le second écran
            SecondView()
                .tabItem {
                    Image(systemName: "square.and.pencil")
                    Text("Second")
            }
            
            // Troisième élément de la TabView, montre le troisième écran
            ThirdView()
                .tabItem {
                    Image(systemName: "trash")
                    Text("Third")
            }
        }
        
    }
}

// Premier écran utilisé dans la TabView
struct FirstView: View {
    var body: some View {
        Text("This is the first view")
    }
}

// Second écran utilisé dans la TabView
struct SecondView: View {
    var body: some View {
        Text("This is the second view")
    }
}

// Troisième écran utilisé dans la TabView
struct ThirdView: View {
    var body: some View {
        Text("This is the third view")
    }
}