SwiftUI Academy · Leçon

Empiler les vues verticalement

Regroupez les vues de haut en bas avec VStack.

Empiler les vues verticalement est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Why You Need Stacks

A SwiftUI body can return only one view. To show several views together, you wrap them in a container that arranges them for you. 📦

Meet VStack

A VStack stacks its child views vertically, top to bottom. It is your go-to container for column-style layouts like a title above a subtitle.

Your First VStack

Place views inside the VStack braces and they appear in order, each on its own line. The first child sits at the top.

VStack {
    Text("Hello")
    Text("World")
}

Order Matters

Children render in the exact order you write them. Swap two lines of code and the views swap places on screen. Top of the code is top of the column.

Centered by Default

By default a VStack centers its children horizontally and shrinks to fit its content, like a tidy little column hugging its views.

Mixing View Types

A VStack does not care what kind of views it holds. You can freely mix a Text, an Image, and a Button in the same vertical stack.

VStack {
    Image(systemName: "star")
    Text("Favorite")
}

How Many Views Fit?

A stack can hold up to ten direct children at once. That is plenty for most screens, and you can always nest stacks for more.

Nesting Stacks

You can put a VStack inside another VStack to build richer layouts. Nesting lets you group related views so they move together.

VStack {
    Text("Title")
    VStack {
        Text("Line 1")
        Text("Line 2")
    }
}

Stacks Are Views Too

A VStack is itself a view, so you can apply modifiers like padding or background to the whole stack at once. The group acts as one unit.

Returning a VStack from body

Since body needs a single view, returning a VStack is the classic way to show many views. The stack becomes that one returned view.

var body: some View {
    VStack {
        Text("One")
        Text("Two")
    }
}

When to Reach for VStack

Use a VStack whenever items should read top to bottom: a heading over body text, a label over a value, or a form laid out in rows.

Quick Check

Let's make sure VStack ordering is clear.

Recap: Vertical Stacking

Nice work! A VStack arranges views top to bottom in code order, centers them by default, and acts as one view you can style or nest. 🎉

Questions Fréquemment Posées

La leçon « Empiler les vues verticalement » est-elle gratuite ?

Oui — le texte complet de « Empiler les vues verticalement » 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 « Empiler les vues verticalement » ?

Regroupez les vues de haut en bas avec VStack. 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 1 sur 4.

Combien de temps prend la leçon « Empiler les vues verticalement » ?

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