VStack

Part of the Introduction to SwiftUI section of Coddy's Swift journey. Lesson 9 of 50.

A body returns one view. To show several, put them in a stack. VStack arranges its views from top to bottom:

VStack {
    Text("Coddy Cafe")
        .font(.title)
    Text("Open 8:00 to 18:00")
}

The views go inside the braces, one per line, in the order they appear on screen. Each can have its own modifiers.

A stack is a view too, so you can style the stack itself. A modifier on the stack applies to the views inside that do not set their own:

VStack {
    Text("Coffee")
    Text("Tea")
}
.font(.headline)

Challenge

Beginner

Show a contact card: a VStack with two texts, Ada Lovelace on top and Engineer below it. Give the name the .title font.

Try it yourself

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction to SwiftUI

1Introduction

4Modifiers

7Lists

10Project - Coddy Coffee

2Showing Content

5State & Buttons

8Navigation

11Final Challenges

3Stacks & Layout

6User Input

9Sharing Data

Practice on your own: Swift playground