@State et Button

@State et Button

Qui dit interaction dit gestion des données. SwiftUI repose sur un système réactif qui met automatiquement à jour l’interface en fonction des changements d’état. Pour organiser ces mises à jour et structurer l’accès aux données, SwiftUI met à notre disposition les property wrappers.

Ces outils permettent de définir comment une donnée est stockée et mise à jour, selon qu’elle appartient à une vue (@State), est partagée entre plusieurs vues (@Binding), ou provient d’une source externe (@ObservedObject, @EnvironmentObject, etc.).

Dans cette première formation sur SwiftUI, nous allons explorer deux property wrappers essentiels pour gérer l’état de nos interfaces : @State et @Binding. Nous découvrirons les autres progressivement.

Et pour bien démarrer avec les interactions, ce cours va aussi te montrer le composant Bouton

L’état d’une vue, c’est quoi ?

Une vue c’est un élément de ton interface (un texte, un bouton, une image…).

L’état d’une vue, c’est une donnée qui influence son affichage. Si cette donnée change, l’apparence de la vue change aussi.

Comme par exemple

→ Si tu affiches “Bonjour”, et que tu veux le remplacer par “Salut”, alors le texte a changé d’état.

→ Si un compteur affiche 0, et que tu appuies sur un bouton pour l’augmenter à 1, alors l’état a changé.

→ Si tu as un bouton qui est gris au début et qui devient orange quand on appuie dessus, c’est aussi un changement d’état.

Le porperty wrapper @State

Ok, maintenant que nous avons clarifié ce qu’est l’état d’une vue, voyons comment procéder pour changer cet état. Quand tu veux modifier l’état d’une vue, SwiftUI doit savoir qu’il a le droit de le faire. C’est là qu’intervient @State. Observons le cas sans @State et avec. Dans la vue ci-dessous, j’ai une propriété message qui a la valeur « Hello SwiftUI ». Plus tard, je récupère cette valeur dans un composant Text() pour l’afficher dans ma vue. Jusqu’ici, tout va bien. Cependant, lorsque j’essaie d’utiliser un bouton pour redéfinir la valeur de la variable (message = « Coucou, SwiftUI »), ça coince. Une erreur s’affiche, indiquant que la propriété est immuable, c’est-à-dire que je ne peux pas la modifier.

Erreur classique sans @State

struct ContentView: View {
    var message = "Hello, SwiftUI!"  // ❌ Pas de @State ici

    var body: some View {
        VStack {
            Text(message)

            Button("Changer le message") {
                message = "Coucou, SwiftUI !"  // ❌ Ne fonctionne pas !
            }
        }
    }
}

C’est ici qu’intervient le property wrapper @State, qui permet justement à Swift d’autoriser la vue à changer d’état (state = état en français). Maintenant, on met @State devant message et ça fonctionne correctement, la vue ce met à jour.

La solution, utiliser @State

struct ContentView: View {
    @State private var message = "Hello, SwiftUI !" 

    var body: some View {
        VStack {
            Text(message)

            Button("Changer le message") {
                message = "Coucou, SwiftUI !"  
            }
        }
    }
}

Le composant Button

Le composant bouton est, tu appuies dessus et il exécute un code que tu as prédéfini.

Button("Appuie-moi !") {
    print("Le bouton a été appuyé !")
}

Améliorons notre bouton

Un bouton sans style, c’est triste. Donnons-lui un peu de personnalité avec des couleurs et du padding.

struct ContentView: View {
    @State private var message = "Pour mettre à jour appuie sur le bouton"

    var body: some View {
        VStack {
            Text(message)
                .padding(.bottom, 48)
                .fontWeight(.bold)
            Button(action: {
                message = "Mise à jour en cours.."
            }, label: {
                HStack {
                    Image(systemName: "arrow.right.circle.fill")
                    Text("Mettre à jour")
                }
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .fontWeight(.bold)
                .cornerRadius(10)
            })
        }
        .padding()
    }
}

Cette version du bouton est la plus courante. Tu as deux zones à connaître sur ce composant :

→ La partie action, qui contient le code qui sera exécuté lorsque l’utilisateur appuiera sur le bouton.

→ La partie label, qui définit l’apparence du bouton. Tu peux y mettre ce que tu veux : du texte, une image, une icône, des empilements de stacks, etc.

Bon, rappelle-toi quand même que c’est censé ressembler à un bouton pour ton utilisateur ! 😄

Bouton ON/OFF

Tu te rappelles du cours sur la condition ternaire ? (Sinon, fonce le revoir ! ) Avec un bouton, on peut s’amuser à modifier l’affichage d’une vue en fonction d’une valeur booléenne. Dans l’action du bouton, tu observeras la méthode .toggle(), qui permet de basculer une variable booléenne entre true et false. Ça équivaut à écrire isActive == false ? true : false, mais en plus simple !

struct ContentView: View {
    @State private var isActive = false

    var body: some View {
        VStack {
            Text(isActive ? "Activé " : "Désactivé")
                .font(.title)
                .padding()

            Button(action: {
                isActive.toggle()
            }) {
                Text(isActive ? "Désactiver" : "Activer")
                    .padding()
                    .background(isActive ? Color.red : Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}