Module 5 - Note de cours

← Retour au module principal

SwiftUI - Les Listes & Navigation

Les listes sont un élément essentiel de toute application. Dans SwiftUI, les listes sont créées à l'aide de la vue List. Les listes peuvent afficher des éléments statiques ou dynamiques. Les éléments statiques sont définis directement dans le code, tandis que les éléments dynamiques sont générés à partir d'une collection de données.

Liste

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Liste avec stack

List {
    HStack {
        Image(systemName: "cart")
        Text("Item 1")
    }
    
    HStack {
        Image(systemName: "trash")
        Text("Item 2")
    }
}

Modifier la ligne de séparation

List {
    Text("Item 1")
        .listRowSeparator(.hidden)
    
    Text("Item 2")
        .listRowSeparatorTint(.green)
    
    Text("Item 3")
        .listRowBackground(Image("LaCite"))
    
    Text("Item 4")
        .listRowBackground(Color.yellow)
}

Liste dynamique

struct ListeDynamique: View {
    var listData: [ToDoList] = [
        ToDoList(task: "Item 1", imageName: "cart"),
        ToDoList(task: "Item 2", imageName: "trash")
    ]
    
    var body: some View {
        List(listData) { item in
            HStack {
                Image(systemName: item.imageName)
                Text(item.task)
            }
        }
    }
}
                
struct ToDoList: Identifiable {
    var id = UUID()
    var task: String
    var imageName: String
}

Liste avec toggle

struct ListeDynamiqueAvecToggle: View {
    @State private var toogleStatus = true
    
    var listData: [ToDoList] = [
        ToDoList(task: "Item 1", imageName: "cart"),
        ToDoList(task: "Item 2", imageName: "trash")
    ]
    
    var body: some View {
        List {
            Toggle(isOn: $toogleStatus) {
                Text("Allow Notification")
            }
            
            ForEach(listData) { item in
                HStack {
                    Image(systemName: item.imageName)
                    Text(item.task)
                }
            }
        }
    }
}

Liste avec section

struct ListeAvecSection: View {
    @State private var toggle = true
    
    var listData: [ToDoList] = [
        ToDoList(task: "Item 1", imageName: "cart"),
        ToDoList(task: "Item 2", imageName: "trash")
    ]
    
    var body: some View {
        List {
            Section(header: Text("Setting")) {
                Toggle(isOn: $toggle) {
                    Text("Notification")
                }
            }
            
            Section(header: Text("To Do List")) {
                ForEach(listData) { item in
                    HStack {
                        Image(systemName: item.imageName)
                        Text(item.task)
                    }
                }
            }
        }
    }
}

Liste avec refresh

struct ListeAvecRefresh: View {
    @State private var toggle = true
    @State var listData: [ToDoList] = [
        ToDoList(task: "Item 1", imageName: "cart"),
        ToDoList(task: "Item 2", imageName: "trash")
    ]
    
    var body: some View {
        List {
            Section(header: Text("Setting")) {
                Toggle(isOn: $toggle) {
                    Text("Notification")
                }
            }
            
            Section(header: Text("To Do List")) {
                ForEach(listData) { item in
                    HStack {
                        Image(systemName: item.imageName)
                        Text(item.task)
                    }
                }
            }
        }
        .refreshable {
            listData = [
                ToDoList(task: "Item 3", imageName: "cart"),
                ToDoList(task: "Item 4", imageName: "trash")
            ]
        }
    }
}

Référence : Neil Smyth. iOS 18 App Development Essentials. Payload Media, Inc.

struct NavigationLinkView: View {
    var body: some View {
        NavigationStack {
            VStack {
                // NavigationLink permet de naviguer vers une autre View
                NavigationLink(destination: DetailView()) {
                    Text("Afficher le détail")
                }
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Ceci est la vue détaillée")
    }
}
struct NavigationStackEtLink: View {
    @State private var toggle = true
    
    var listData: [ToDoList] = [
        ToDoList(task: "Item 1", imageName: "cart"),
        ToDoList(task: "Item 2", imageName: "trash")
    ]

    var body: some View {
        NavigationStack {
            List {
                Section(header: Text("Settings")) {
                    Toggle(isOn: $toggle) {
                        Text("Allow notifications")
                    }
                }
                
                Section(header: Text("To Do Tasks")) {
                    ForEach(listData) { item in
                        NavigationLink(value: item.task) {
                            HStack {
                                Image(systemName: item.imageName)
                                Text(item.task)
                            }
                        }
                    }
                }
            }
            .navigationTitle("To Do List")
            .navigationDestination(for: String.self) { task in
                Text("Selected task = \(task)")
            }
        }
    }
}

NavigationStack toolbar

struct NavigationStackAvecToolbar: View {
            var listData: [ToDoList] = [
                ToDoList(task: "Item 1", imageName: "cart"),
                ToDoList(task: "Item 2", imageName: "trash")
            ]
            
    var body: some View {
        NavigationStack {
            List {
                ForEach(listData) { item in
                    HStack {
                        Image(systemName: item.imageName)
                        Text(item.task)
                    }
                }
                .onDelete(perform: deleteTask) // Permet de glisser un item pour le supprimer
                .onMove(perform: moveTask) // Permet de deplacer un item dans la liste
            }
            .navigationTitle("To Do List")
            .toolbar { // Permet d'ajouter une bar de navigation
                ToolbarItem(placement: .navigationBarLeading) {
                    Text("Add")
                        .foregroundColor(.blue)
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton() // EditButton() est une fonction deja existante
                }
            }
        }
    }
    // Function qui gere la suppression d'un item
    func deleteTask(at offset: IndexSet) {}
    
    // Function qui gere le deplacement d'un item
    func moveTask(from source: IndexSet, to destination: Int) {}
}

Form

struct FormView: View {
    @State private var username: String = ""
    @State private var email: String = ""
    
    var body: some View {
        Form {
            Section(header: Text("Informations utilisateur")) {
                TextField("Nom d'utilisateur", text: $username)
                TextField("Email", text: $email)
            }
            
            Button("Envoyer") {
                // Valider et traiter les données saisies
            }
        }
    }
}
↑