Alignment And Spacing

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

A VStack centers its views and leaves a small default gap between them. Both can be changed when you create the stack:

VStack(alignment: .leading, spacing: 12) {
    Text("Order #42")
        .font(.headline)
    Text("2 coffees")
    Text("Ready at 10:30")
}

alignment: .leading lines the views up on the left edge (.trailing is the right edge). spacing: 12 puts 12 points between each pair of views.

An HStack aligns vertically instead: .top, .center or .bottom:

HStack(alignment: .top, spacing: 20) {
    Text("Left")
    Text("Right")
}

Challenge

Easy

Make the receipt read like a list: set the VStack's alignment to .leading and its spacing to 12.

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