#Les bases de SwiftUI

#Views

En SwiftUI tout ce qui est affiché à l’écran est une View. Une View peut être un bouton, un texte, une image, une liste, etc.

Lors de la création d’un projet SwiftUI, une View est créée par défaut. Elle est définie comme ceci :

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

Ensuite c’est à vous de composer avec les views, il en existe pour structurer la vue (VStack, HStack, ZStack), pour afficher du texte (Text), des images (Image), des boutons (Button), etc. Vous devez donc imbriquer les views les unes dans les autres pour créer votre interface.

#Les views essentiels

Voir la partie théorie du cours (.pdf du cours)

#Les modifiers

Les vues sont personnalisables / configurables grâce aux modifiers. Les modifiers sont des méthodes qui modifient l’apparence ou le comportement d’une vue.

Voici un exemple d’utilisation de modifiers :

struct ContentView: View {
    @State private var username = ""

    var body: some View {
        VStack {
            TextField("Username", text: $username)
                .padding() // Ajoute de l'espacement autour de la vue
                .textFieldStyle(RoundedBorderTextFieldStyle()) // Applique un style de bord arrondi au champ de saisie

            Text("Hello, \(username)!")
                .padding()
                .foregroundColor(.blue) // Change la couleur du texte
        }
        .padding()
    }
}

• VStack est un conteneur qui empile ses vues enfants verticalement.
• TextField crée un champ de saisie avec une liaison bidirectionnelle vers la variable $username.
• Text affiche un message personnalisé avec le contenu du champ de saisie.
• .padding() ajoute de l’espacement autour des vues.
• .textFieldStyle(RoundedBorderTextFieldStyle()) applique un style de bord arrondi au champ de saisie.

#La Preview

En SwiftUI on peut voir en temps réel les changements apportés à notre code grâce à la Preview.

En général la preview est dans le même fichier que la vue qu’il dessert. Et se présente sous cette forme :

#Preview {
    ContentView()
    // Si besoin on rajoute des paramètres pour prévisualiser notre vue avec des données spécifiques
    ContentView(username: "John") // Exemple
}

#States et Binding

#State

State est utilisé pour déclarer des propriétés dont la modification entraîne une mise à jour de l’interface utilisateur. Vous l’utiliserez principalement pour les valeurs qui changent au fil du temps, comme le texte d’un champ de saisie.

Exemple :

import SwiftUI

struct ContentView: View {
    @State private var username = ""

    var body: some View {
        TextField("Username", text: $username)
    }
}

#Binding

Binding permet de créer une liaison bidirectionnelle entre une valeur stockée (comme un @State) et une vue. Cela permet à la vue de lire et de modifier la valeur.

Exemple :

import SwiftUI

struct ContentView: View {
    @State private var username = ""

    var body: some View {
        CustomTextField(username: $username)
    }
}

struct CustomTextField: View {
    @Binding var username: String

    var body: some View {
        TextField("Username", text: $username)
    }
}

#ObservableObjects et StateObject

#ObservableObject

ObservableObject est utilisé pour créer des objets dont les propriétés publiées déclenchent automatiquement des mises à jour de l’interface utilisateur lorsqu’elles changent.

Exemple :

import SwiftUI

class UserData: ObservableObject {
    @Published var username = ""
}

struct ContentView: View {
    @ObservedObject var userData = UserData()

    var body: some View {
        TextField("Username", text: $userData.username)
    }
}

#@Published

@Published est utilisé pour déclarer des propriétés d’un objet observable dont la modification entraîne une mise à jour de l’interface utilisateur.

#StateObject

StateObject est utilisé pour initialiser un objet observable en tant que propriété d’une vue et garantit que l’objet est créé une seule fois.

Exemple :

import SwiftUI

class UserData: ObservableObject {
    @Published var username = ""
}

struct ContentView: View {
    @StateObject var userData = UserData()

    var body: some View {
        TextField("Username", text: $userData.username)
    }
}

#@Environment et @EnvironmentObject

• @Environment est utilisé pour récupérer des valeurs stockées dans l’environnement global de SwiftUI, tels que la taille de la police ou le mode sombre.

Exemple :

import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Color Scheme: \(colorScheme)")
    }
}

• @EnvironmentObject est utilisé pour injecter un objet observable dans une vue sans avoir besoin de le passer explicitement.

Exemple :

import SwiftUI

class UserData: ObservableObject {
    @Published var username = "John"
}

struct ContentView: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        Text("Welcome, \(userData.username)!")
    }
}

Il est important de noter que lorsque vous utilisez @EnvironmentObject, vous devez injecter l’objet dans la vue racine de votre hiérarchie de vues en utilisant .environmentObject(_:). Par exemple :

    ContentView()
        .environmentObject(UserData())