SwiftUI pour Swift : guide complet avec exemples

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Qu'est-ce que SwiftUI et pourquoi en a-t-on besoin ?

\n\n

SwiftUI est un framework moderne et déclaratif pour construire des interfaces utilisateur sur toutes les plateformes Apple : iOS, macOS, watchOS et tvOS. Contrairement à l'approche traditionnelle UIKit (où vous gérez manuellement l'état et la mise à jour des vues), SwiftUI vous permet de décrire à quoi l'interface doit ressembler, plutôt que comment la construire. Le framework suit automatiquement les changements de données et ne redessine que les parties de l'interface qui ont changé.

\n\n

Pourquoi en a-t-on besoin ?

\n
    \n
  • Moins de code : Le même code fonctionne sur toutes les plateformes Apple.
  • \n
  • Déclarativité : Vous décrivez l'interface comme un ensemble de structures simples, et non comme une séquence de commandes.
  • \n
  • Gestion automatique de l'état : @State, @Binding, @ObservableObject — SwiftUI décide lui-même quand redessiner l'interface.
  • \n
  • Aperçu en direct : Dans Xcode, vous voyez les modifications en temps réel.
  • \n
  • Animations : Ajouter des animations se fait en une seule ligne de code.
  • \n
\n\n

SwiftUI n'est pas une bibliothèque à installer séparément. C'est un framework intégré, disponible depuis iOS 13, macOS 10.15, watchOS 6 et tvOS 13. Il est fourni avec Xcode et le SDK Apple.

\n\n

Installation (Configuration du projet)

\n\n

Puisque SwiftUI fait partie du SDK standard d'Apple, il n'est pas nécessaire de l'installer via pip, npm ou CocoaPods. Tout ce dont vous avez besoin est Xcode (version 11 ou ultérieure) et un projet configuré pour iOS 13+ / macOS 10.15+.

\n\n

Comment créer un nouveau projet avec SwiftUI :

\n
    \n
  1. Ouvrez Xcode.
  2. \n
  3. Sélectionnez File → New → Project.
  4. \n
  5. Choisissez le modèle "App" (ou "SwiftUI App" dans les versions plus anciennes).
  6. \n
  7. Assurez-vous que le champ "Interface" est réglé sur "SwiftUI".
  8. \n
  9. Cliquez sur "Next" et créez le projet.
  10. \n
\n\n

Si vous travaillez sur un projet UIKit existant, vous pouvez ajouter un fichier SwiftUI (File → New → File → SwiftUI View). SwiftUI et UIKit peuvent coexister dans un même projet via UIHostingController.

\n\n

Démarrage rapide avec un exemple de code

\n\n

Créons une simple application "Compteur de clics". C'est un exemple classique qui montre les concepts de base de SwiftUI : état, boutons et texte.

\n\n
import SwiftUI\n\nstruct ContentView: View {\n    // @State — une propriété qui stocke l'état et redessine automatiquement la View lorsqu'elle change\n    @State private var count = 0\n\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Compteur : \\(count)")\n                .font(.largeTitle)\n                .padding()\n\n            HStack(spacing: 20) {\n                Button("Augmenter") {\n                    count += 1\n                }\n                .padding()\n                .background(Color.blue)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n\n                Button("Réinitialiser") {\n                    count = 0\n                }\n                .padding()\n                .background(Color.red)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n            }\n        }\n    }\n}\n\n// Point d'entrée de l'application\n@main\nstruct MyApp: App {\n    var body: some Scene {\n        WindowGroup {\n            ContentView()\n        }\n    }\n}\n
\n\n

Explication :

\n
    \n
  • @State — indique à SwiftUI que cette propriété doit être surveillée. Lorsque count change, SwiftUI redessine automatiquement ContentView.
  • \n
  • VStack et HStack — sont des conteneurs pour l'alignement vertical et horizontal des éléments.
  • \n
  • Button — crée un bouton qui exécute une fermeture lorsqu'il est pressé.
  • \n
  • Les modificateurs (.font(), .padding(

Recommendations