Le Guide ultime de Swiftui pour les nouveaux développeurs d'Ios

L'anatomie d'une vue SwiftUI

Chaque vue dans SwiftUI est conforme au protocole et met en œuvre une seule propriété calculée requise : . La propriété décrit le contenu et la disposition de la vue. Voici la structure minimale :

import SwiftUI

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

Le type de retour est un type opaque — il indique au compilateur que le corps renvoie un type de béton qui est conforme à , mais vous n'avez pas besoin de spécifier exactement lequel. Cela maintient votre code concis et flexible.

Vous pouvez composer plusieurs vues en utilisant des conteneurs de mise en page comme , et . Par exemple:

struct ContentView: View {
 var body: some View {
 VStack {
 Text("Welcome")
 .font(.largeTitle)
 Text("Start building with SwiftUI")
 .foregroundColor(.secondary)
 }
 .padding()
 }
}

Ici, le arrange ses enfants verticalement, et le modificateur ajoute de l'espace autour de toute la pile. Les modificateurs peuvent être enchaînés sur n'importe quelle vue pour personnaliser son apparence ou son comportement.

Vues et modificateurs – Les blocs de construction de base

SwiftUI fournit une riche bibliothèque de vues intégrées telles que , , , , , , et plus. Chaque vue peut être personnalisée avec modificateurs — méthodes qui renvoient une nouvelle version de la vue avec la modification appliquée.

• – définit le style de police
• – change la couleur du texte
• – ajoute un rembourrage par défaut autour de la vue
• – remplit l'arrière-plan d'une couleur
• – arrondit les coins d'une forme ou d'une image
• – ajoute une ombre de goutte

Les modifications peuvent être appliquées dans n'importe quel ordre, mais l'ordre est important parce que chaque modification enveloppe la vue précédente. Par exemple, tamponne le contenu d'abord et peint ensuite le fond, ce qui entraîne un rectangle rouge autour de la zone rembourrée.

Conteneurs de disposition – VStack, HSTack, ZStack

SwiftUI utilise trois conteneurs de cheminée primaires pour organiser les vues :

• VStack – arrange les enfants verticalement (du haut au bas)
• Hastack – organise les enfants horizontalement (de gauche à droite)
• ZStack – superpose les enfants les uns sur les autres (ordre de profondeur)

Vous pouvez nicher des piles arbitrairement pour créer des mises en page complexes. Chaque pile supporte également les paramètres et .

VStack(alignment: .leading, spacing: 20) {
 Text("Top")
 HStack {
 Text("Left")
 Text("Right")
 }
 ZStack {
 Color.blue
 Text("Overlay")
 .foregroundColor(.white)
 }
 .frame(height: 100)
}

Cela produit une pile verticale avec un alignement de tête, contenant un titre, une paire horizontale, et un rectangle bleu avec du texte blanc centré sur le dessus.

Gestion d'État à SwiftUI

L'une des fonctionnalités les plus puissantes de SwiftUI est la façon dont il gère les données dynamiques. Au lieu de mettre à jour manuellement l'interface utilisateur lorsque les données changent, vous déclarez les données comme state, et SwiftUI re-rend automatiquement les vues affectées.

SwiftUI fournit plusieurs emballages de propriétés[ pour la gestion de l'état, chacun adapté à différents scénarios:

Utilisation de @State pour l'État local

est utilisé pour des valeurs simples qui appartiennent exclusivement à une vue unique, comme un état d'activation/arrêt de bascule ou un champ texte. Lorsque la valeur change, la vue est réinvoquée. Exemple :

struct ToggleExample: View {
 @State private var isOn = false

 var body: some View {
 Toggle("Enable Notifications", isOn: $isOn)
 .padding()
 }
}

Remarquez le préfixe — il crée une liant[ à l'état, permettant au de lire et d'écrire la valeur. Marquez toujours ] avec pour faire respecter qu'il est interne à la vue.

@Binding pour passer l'État vers le bas

Lorsqu'une vue enfant doit modifier l'état de propriété d'un parent, vous utilisez . L'enfant reçoit une liaison à la valeur et peut la modifier, et le parent affiche automatiquement les mises à jour. Par exemple:

struct ParentView: View {
 @State private var showSheet = false

 var body: some View {
 ChildView(showSheet: $showSheet)
 }
}

struct ChildView: View {
 @Binding var showSheet: Bool

 var body: some View {
 Button("Toggle Sheet") {
 showSheet.toggle()
 }
 }
}

Les liens sont la colle qui relie les vues dans une hiérarchie sans introduire de délégation complexe ou des motifs de rappel.

Objets observables et @StateObject

Pour des modèles de données plus complexes partagés sur plusieurs vues, créez une classe conforme à . À l'intérieur de la classe, marquez les propriétés avec afin que les modifications déclenchent les mises à jour de la vue. Ensuite, utilisez dans la vue qui possède l'objet. Exemple :

class UserSettings: ObservableObject {
 @Published var username = "Guest"
}

struct SettingsView: View {
 @StateObject private var settings = UserSettings()

 var body: some View {
 VStack {
 Text("Hello, \(settings.username)")
 TextField("Username", text: $settings.username)
 .textFieldStyle(RoundedBorderTextFieldStyle())
 .padding()
 }
 }
}

Utilisez uniquement lors de l'initialisation de l'objet dans cette vue. Si l'objet est créé ailleurs, utilisez pour l'observer sans en prendre possession.

@EnvironnementObject pour l'État partagé

Lorsque vous devez injecter le même objet observable dans de nombreuses vues sans le passer par chaque initialisateur, utilisez . D'abord, créez l'objet dans une vue parente (par exemple, le point d'entrée de l'application) et injectez-le à l'aide du modificateur . Toute vue descendante peut alors y accéder en déclarant une propriété avec . Ceci est particulièrement utile pour les données de l'application comme l'authentification ou les paramètres de l'utilisateur.

@main
struct MyApp: App {
 @StateObject private var settings = UserSettings()

 var body: some Scene {
 WindowGroup {
 ContentView()
 .environmentObject(settings)
 }
 }
}

struct DetailView: View {
 @EnvironmentObject var settings: UserSettings

 var body: some View {
 Text(settings.username)
 }
}

Pour une plongée plus profonde dans la gestion de l'état, la documentation sur la gestion de l'état de l'interface utilisateur est une excellente ressource.

Construire votre première application SwiftUI – Une application à prendre en note

Let , s'applique ce que vous avez appris en construisant une simple application de prise de notes. L'application affichera une liste de notes, permettra à l'utilisateur d'en ajouter de nouvelles, et affichera les détails quand une note est tapée.

Configuration du modèle de données

Créez un nouveau fichier Swift nommé et définissez un modèle :

import Foundation

struct Note: Identifiable {
 let id = UUID()
 var title: String
 var content: String
}

Le protocole exige une propriété , que SwiftUI utilise pour distinguer les éléments d'une liste.

Création de la vue Liste

Dans , utilisez pour tenir un tableau de notes et un pour les afficher. Ajoutez un bouton barre d'outils pour créer de nouvelles notes :

struct ContentView: View {
 @State private var notes = [
 Note(title: "Hello", content: "This is my first note.")
 ]

 var body: some View {
 NavigationStack {
 List {
 ForEach(notes) { note in
 NavigationLink(destination: NoteDetailView(note: note)) {
 Text(note.title)
 }
 }
 .onDelete(perform: removeNote)
 }
 .navigationTitle("Notes")
 .toolbar {
 ToolbarItem(placement: .navigationBarTrailing) {
 Button(action: addNote) {
 Image(systemName: "plus")
 }
 }
 }
 }
 }

 private func addNote() {
 notes.append(Note(title: "New Note", content: ""))
 }

 private func removeNote(at offsets: IndexSet) {
 notes.remove(atOffsets: offsets)
 }
}

Remarquez l'utilisation de (iOS 16+) pour la navigation et pour pousser une vue de détail. Le modificateur permet de glisser-à-déplacer.

Ajout de la navigation et de la vue de détail

Créer un nouveau fichier qui prend un et permet l'édition. Pour la brièveté, nous allons afficher le titre et le contenu en mode lecture seule. Vous pouvez ensuite l'étendre avec des liaisons pour activer l'édition.

struct NoteDetailView: View {
 let note: Note

 var body: some View {
 VStack(alignment: .leading, spacing: 16) {
 Text(note.title)
 .font(.title)
 Text(note.content)
 .font(.body)
 .foregroundColor(.secondary)
 Spacer()
 }
 .padding()
 .navigationTitle("Note")
 }
}

Exécutez l'application dans le simulateur ou l'aperçu. Vous verrez une liste de notes, vous pouvez en ajouter de nouvelles, appuyez sur pour afficher les détails, et faites glisser à supprimer. Cette application de base montre Liste, NavigationStack, état et flux de données — tous les motifs SwiftUI du noyau.

Débogue et aperçus

Si une vue ne semble pas droite, inspecter la chaîne de modification et vous assurer d'utiliser le conteneur de mise en page correct. Les problèmes courants comprennent:

• Il manque des vues qui font toucher les bords.
• Ordre incorrect des modificateurs (par exemple, arrière-plan avant rembourrage).
• Utiliser sans initialiser l'objet.

Vous pouvez également ajouter des instructions à l'intérieur de votre ou dans des boutons pour vérifier les modifications d'état. Pour le débogage de l'exécution, utilisez le menu Simulator=Debug[ pour afficher la hiérarchie de la vue et vérifier les conflits de mise en page.

Une autre technique puissante est d'utiliser pour voir comment votre interface utilisateur est conçue pour différentes tailles d'appareils. Vous pouvez également ajouter plusieurs instances de prévisualisation pour comparer les variations:

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 Group {
 ContentView()
 .previewDevice("iPhone 15 Pro")
 ContentView()
 .previewDevice("iPhone SE (3rd generation)")
 }
 }
}

Performance et pratiques exemplaires

SwiftUI est conçu pour être efficace, mais il existe des pratiques pour maintenir vos applications en bon état de fonctionnement:

• Utilisez des modèles identifiables pour les listes afin d'aider SwiftUI diff et mettre à jour seulement les lignes modifiées.
• Keep views small – casser les grandes vues en composants plus petits et réutilisables. Cela améliore la lisibilité et permet aux mises à jour progressives de SwiftUI de fonctionner plus granuleusement.
• Éviter les calculs coûteux dans – effectuer des travaux lourds en vue de modèles ou avec propriétés. SwiftUI réévalue chaque fois que l'état change, alors gardez-le rapidement.
• Préférence pour les données locales de vue et déplacer la logique d'affaires complexe vers des objets observables.
• ] ou pour empêcher les ré-releveurs inutiles lorsque les entrées de vue ont changé.
• Profil avec Instruments – Xcode=s Le modèle SwiftUI dans Instruments aide à identifier les mises à jour de vue et les goulets d'étranglement de rendu.

Pour une visite approfondie des performances de SwiftUI, consultez ce guide de Swift avec Majid.

Prochaines étapes et ressources

Vous avez maintenant une base solide à SwiftUI. Pour continuer à apprendre et à construire des applications plus avancées:

• Découvrez les tutoriels officiels d'Apple – Les Tutoriels SwiftUI d'Apple vous permettent de construire une application complète étape par étape.
• Lire Hacking with Swift – Paul Hudson=1 100 Days of SwiftUI est un cours gratuit et complet.
• Plongez dans des motifs réactifs – Apprendre à combiner (cadre réactif Apple) pour gérer des flux de données asynchrones et des pipelines de données complexes.
• Construisez un vrai projet – Choisissez un concept d'application simple (semence, liste à faire, traqueur d'habitude) et implémentez-le à partir de zéro. La meilleure façon d'apprendre est de faire.
• Rejoindre la communauté – Les forums Swift, les forums Apple Developer et le subreddit r/SwiftUI sont des endroits formidables pour poser des questions et partager votre travail.

Conclusion

SwiftUI représente un changement de paradigme dans le développement de la plateforme Apple. Sa syntaxe déclarative, ses mises à jour automatiques sous l'impulsion de l'état et son aperçu en direct en font le cadre idéal pour les nouveaux développeurs iOS pour commencer à construire des applications fonctionnelles et belles rapidement.

Continuez à expérimenter — modifiez les exemples de ce guide, cassez-les et corrigez-les. Chaque itération renforce votre compréhension. En grandissant, vous découvrirez comment SwiftUI s'intègre à d'autres cadres Apple comme Core Data, CloudKit et Swift Charts. Les compétences que vous développez ici vous serviront bien sur toutes les plateformes Apple.