Learn

with Swift Accelerator

Learn

with Swift Accelerator

Components

Spacer

Last updated on 20 Oct 2024.

Jia Chen

Playground on iPad

Playground on Mac

Xcode

Components

Spacer

Last updated on 20 Oct 2024.

Jia Chen

Playground on iPad

Playground on Mac

Xcode

Components

Spacer

Last updated on 20 Oct 2024.

Jia Chen

Playground on iPad

Playground on Mac

Xcode

Scroll Down

Creating a Spacer

A Spacer is used to add a flexible space between subviews in a stack view like a VStack or HStack.

Spacer in Horizontal Stacks

When in a HStack, it spreads the elements apart horizontally.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("social")
            Spacer()
            Text("distanced")
        }
    }
}

This can also be used to align elements together to the leading or trailing edge.

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "hand.wave")
            Text("hello")
            Spacer()
        }
    }
}

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "hand.wave")
            Text("hello, again")
        }
    }
}

Spacer in Vertical Stacks

When in a VStack, the Spacer spreads elements apart vertically.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("up high")
            Spacer()
            Text("down low")
        }
    }
}

This can also be used to align to the top and bottom edges of the parent view.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "hand.wave")
            Text("hello from up here!")
            Spacer()
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("😢")
            Text("oh i fell down.")
        }
    }
}

Using Multiple Spacers

You can also use multiple spacers to set different distances.

In the following example, the gap between the 🍎 and 🍋 is twice that of the gap between 🍌 and 🍎.

HStack {
    Text("🍌")
    Spacer()
    Text("🍎")
    Spacer()
    Spacer()
    Text("🍋")
}

Setting a Minimum Length

You can also specify a minimum length for a Spacer, ensuring the Spacer does not fall below a certain size.

Spacer(minLength: 32)

Components

Spacer

Components

Spacer

Components

Spacer

On this page

On this page

Creating a Spacer

Spacer in Horizontal Stacks

Spacer in Vertical Stacks

Using Multiple Spacers

Setting a Minimum Length

In These Collections

SwiftUI Foundations

A collection of articles and examples on SwiftUI foundations.

Layout

A collection of articles and examples on SwiftUI Layout.

See Also

Horizontal Stack

A HStack allows you to arrange subviews horizontally.

Vertical Stack

A VStack allows you to arrange subviews vertically.

Fitting & Filling Views

Views can behave in 2 ways, fitting or filling. This affects how they appear when laying out content.