Section dans SwiftUI : qu'est-ce que c'est, créer des sections et regrouper

Qu'est-ce que Section dans SwiftUI ?

Section est un composant structurel de SwiftUI conçu pour regrouper des éléments dans les conteneurs Form et List. Contrairement à VStack ou HStack, Section ajoute un espacement système, un en-tête et un pied de page, ainsi qu'un surlignage visuel du groupe sous forme de bloc aux coins arrondis sur iOS.

Section ne modifie pas le comportement des éléments enfants — elle organise seulement leur présentation. Tous les contrôles dans Section — Picker, Toggle, TextField — fonctionnent normalement, mais sont visuellement combinés en un groupe logique. C'est particulièrement important pour les formulaires à l'écran où l'utilisateur doit s'orienter rapidement dans la structure de saisie des données.

Le système gère automatiquement l'espacement entre les sections : la distance entre les Sections sur iOS est de 16–20 points, entre les éléments dans une Section est de 0 (séparateur entre les lignes). Le développeur ne peut pas modifier ces espacements via les modificateurs padding — ils sont contrôlés par le système pour garantir une apparence uniforme.

En-tête et pied de page de Section

Section accepte deux paramètres facultatifs : header — le titre du groupe, et footer — le texte explicatif sous le groupe. L'en-tête s'affiche au-dessus des éléments de la section en gras avec un style de légende, le pied de page en police plus petite en gris. Les deux paramètres acceptent n'importe quelle SwiftUI View, pas seulement Text.

L'en-tête de Section aide l'utilisateur à comprendre à quelle catégorie appartiennent les éléments du groupe. Par exemple, sur un écran de paramètres, des en-têtes comme « Notifications », « Confidentialité » et « Compte » orientent instantanément l'utilisateur. Le pied de page est utile pour les explications : « Désactivez les notifications pendant les réunions » ou « Le mot de passe doit contenir au moins 8 caractères. » Le pied de page se répartit automatiquement sur plusieurs lignes si nécessaire.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Dans l'exemple, Section a l'en-tête « Account Security » et un pied de page avec des conseils de sécurité de mot de passe. L'utilisateur voit l'en-tête comme étiquette de section, remplit deux champs et lit immédiatement l'avertissement en dessous. Cette structure améliore l'UX car toutes les informations sur la section sont sur un seul écran sans avoir à naviguer vers une aide séparée.

Section dans Form et List

Section fonctionne à la fois dans Form et dans List, mais la représentation visuelle diffère. Dans Form, Section s'affiche comme un bloc avec des coins arrondis et un fond système, séparé des sections adjacentes par un espacement. Dans List, Section peut utiliser le style plain — sans fond ni coins arrondis, ou inset-grouped — avec des blocs arrondis similaires à Form.

Le choix du conteneur affecte le style de Section. Si vous placez une Section avec le même contenu dans Form et List avec le style .insetGrouped, le résultat sera identique. Cependant, Form ajoute un espacement système et utilise le style grouped par défaut, tandis que List nécessite une spécification explicite du style via le modificateur .listStyle(.insetGrouped).

Pour obtenir la même apparence dans List, utilisez .listStyle(.insetGrouped). Ce style imite l'apparence de Form et convient aux écrans de paramètres construits sur List. Pour les listes de données standard, utilisez .plain — sans surlignage de section, avec des séparateurs fins entre les lignes.

Contenu dynamique avec ForEach

Section peut contenir un nombre dynamique d'éléments via ForEach. Cela permet de créer des groupes avec des éléments répétés tout en conservant l'en-tête et le pied de page pour l'ensemble du groupe. ForEach dans Section itère sur une collection de données et crée des Views enfants pour chaque élément sans casser la structure de la section.

Les sections dynamiques sont utiles pour les écrans de paramètres avec un nombre variable d'options : liste des langues disponibles, appareils connectés ou abonnements push. L'en-tête de la section reste statique tandis que le contenu change selon les données.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Dans cet exemple, ForEach génère un Toggle pour chaque catégorie du tableau categories. L'en-tête et le pied de page de la section sont définis une fois et s'appliquent à l'ensemble du groupe. La deuxième section affiche le nombre de catégories sélectionnées — elle ne dépend pas de ForEach et reste statique. Cette approche permet de créer des formulaires flexibles où l'en-tête et le pied de page contextualisent un groupe d'éléments dynamiques.

Exemples de code Section

Examinons un exemple complet d'écran de profil utilisant Section pour regrouper des données. Le formulaire contient trois sections : informations utilisateur, paramètres de confidentialité et statistiques. Chaque section utilise son propre en-tête, et la dernière a un pied de page avec des informations récapitulatives.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Trois blocs Section séparent clairement les zones fonctionnelles : champs modifiables du profil, interrupteurs de confidentialité et statistiques. La deuxième section illustre la validation : l'interrupteur « Show email » est désactivé tant que le profil n'est pas public. Le pied de page de la troisième section affiche l'heure de la dernière mise à jour — un exemple d'utilisation du pied de page pour des informations contextuelles supplémentaires. LabeledContent est un composant standard de SwiftUI pour afficher des paires clé-valeur dans Form.

Section avec en-tête personnalisé

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Cet exemple montre que header peut être n'importe quelle SwiftUI View. L'utilisation de HStack avec Image et Text ajoute une icône à côté de l'en-tête, rendant la section visuellement plus expressive. Les en-têtes personnalisés sont utiles pour mettre en évidence des sections importantes dans l'interface : paramètres de notification, fonctions payantes ou sections avec avertissements. Cependant, il n'est pas recommandé d'abuser des en-têtes personnalisés — 1–2 sections avec un style non standard par écran suffisent pour maintenir l'uniformité de l'interface.