Chapitre 1 · Leçon 1
Le système déclaratif de SwiftUI
Section 1
Step 1
Toute interface SwiftUI est une struct conforme au protocole View. La propriété body retourne la description déclarative de l'interface.
TutorialCard.swift
1import SwiftUI
2
3struct TutorialCard: View {
4 let tutorial: Tutorial
5
6 var body: some View {
7 VStack(alignment: .leading, spacing: 8) {
8 // Thumbnail
9 AsyncImage(url: URL(string: tutorial.thumbnailUrl)) { image in
10 image.resizable().aspectRatio(contentMode: .fill)
11 } placeholder: {
12 Rectangle().foregroundColor(.gray.opacity(0.2))
13 }
14 .frame(height: 160)
15 .clipped()
16
17 // Contenu
18 VStack(alignment: .leading, spacing: 4) {
19 Text(tutorial.title)
20 .font(.headline)
21 .lineLimit(2)
22 .foregroundColor(.primary)
23
24 HStack(spacing: 8) {
25 LevelBadge(level: tutorial.level)
26
27 Text("(tutorial.duration) min")
28 .font(.caption)
29 .foregroundColor(.secondary)
30
31 Spacer()
32 }
33 }
34 .padding(.horizontal, 12)
35 .padding(.bottom, 12)
36 }
37 .background(.white)
38 .cornerRadius(12)
39 .shadow(color: .black.opacity(0.08), radius: 8, y: 2)
40 }
41}
42
43// View séparée — composition
44struct LevelBadge: View {
45 let level: String
46
47 private var color: Color {
48 switch level {
49 case "Beginner": return .green
50 case "Intermediate": return .blue
51 case "Advanced": return .purple
52 default: return .gray
53 }
54 }
55
56 var body: some View {
57 Text(level)
58 .font(.caption)
59 .fontWeight(.medium)
60 .padding(.horizontal, 8)
61 .padding(.vertical, 2)
62 .background(color.opacity(0.15))
63 .foregroundColor(color)
64 .cornerRadius(4)
65 }
66}Step 2
@State crée un état local à la vue. @Binding partage un état avec une vue enfant — la vue enfant peut modifier la valeur du parent.