// 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
List of persons
// 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
ContentView
DetailsView
Navigation hiérarchique simple
// 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
ContentView
PersonDetails
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
FirstView
SecondView
ThirdView
Navigation en silo
// 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")
}
}