SwiftUI Academy · Leçon

Sections et styles de liste

Regroupez les lignes avec des sections et choisissez un style de liste.

Sections et styles de liste est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Grouping with Sections

A long list reads better when split into chunks. Section groups related rows under a shared heading. 🗂️

List {
    Section("Fruits") {
        Text("Apple")
    }
}

Headers and Footers

A Section can show a header above its rows and a footer below, great for titles and helper text.

Section {
    Text("Wi-Fi")
} header: {
    Text("Network")
} footer: {
    Text("Tap to connect")
}

Multiple Sections

Stack several Section blocks in one List to organize a busy screen into clear, labeled groups that are easy to scan.

List {
    Section("On") { Text("Item A") }
    Section("Off") { Text("Item B") }
}

Sections With ForEach

Combine Section with ForEach to build grouped, data-driven lists, like contacts sorted by letter.

Section("A") {
    ForEach(aNames, id: \.self) { Text($0) }
}

Meet List Styles

The listStyle modifier changes a list's whole look, from grouped cards to plain edge-to-edge rows.

List { Text("Row") }
    .listStyle(.insetGrouped)

The Inset Grouped Look

insetGrouped is the default rounded-card style you see in Settings, with spacing around each section.

.listStyle(.insetGrouped)

The Plain Style

The plain style removes the card insets for full-width, edge-to-edge rows, ideal for feeds and chat-like screens.

.listStyle(.plain)

The Grouped Style

The grouped style gives boxed sections without the rounded inset corners, a classic full-width table look.

.listStyle(.grouped)

Styling Section Headers

You can restyle a header with modifiers, changing its font, color, or case to match your design.

header: {
    Text("Network").font(.headline)
}

Collapsible Sections

A header can act as a control too, letting you build expandable sections that show or hide their rows.

Pick the Right Style

Choose a style that fits the screen: insetGrouped for settings, plain for content feeds. The data stays the same. ✨

Quick Check

Match each concept to its job.

Recap

You learned Section and listStyle: group rows into labeled chunks and switch looks like insetGrouped or plain. 🎉

Questions Fréquemment Posées

La leçon « Sections et styles de liste » est-elle gratuite ?

Oui — le texte complet de « Sections et styles de liste » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Sections et styles de liste » ?

Regroupez les lignes avec des sections et choisissez un style de liste. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?

Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Sections et styles de liste » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?

Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à SwiftUI Academy