According to Apple’s documentationSpacer :

A flexible space that can expand along the main axis of the stck layout it contains, or in both axes if it is not contained in the stack.

So let’s start by creating a simple HStack and using modifiers .frame(maxWidth:maxHeight:alignment:)to achieve the same effect.

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }
}

1. Add in front

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }

By setting maxWidthto .infinity, we indicate that the container view should use as much horizontal space as possible.

Alignment .trailingwill ensure that the content is aligned with the end.

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
        .frame(maxWidth: .infinity, alignment: .trailing)
    }
}

2. Add in the middle

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Spacer()
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }
}

Just frameuse a modifier on one of the trailing ones and set the desired alignment.

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
                .frame(maxWidth: .infinity, alignment: .trailing)
        }
        .border(.blue)
        .padding()
    }
}

3. Add at the end

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
            Spacer()
        }
        .border(.blue)
        .padding()
    }
}

.leadingAlignment can optionally be used .

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

the difference

Visually, both methods look exactly the same (if you forget about the blue borders, it’s just to get an idea of ​​how all of this behaves). But now, you set behavior directly on the container instead of adding additional flexible components inside it.

Therefore, using .framemodifiers will save a lot of performance over a Spacer, especially in lists or long horizontal/vertical stacks.

in conclusion

Of course, Spacerstill useful in more complex components. But my advice is Spacerto use as little as possible for the performance cost and readability.

I’m also only using this in my code examples HStack, but the handling is basically the same with parameters and some or alignment VStack.maxHeight``.top``.bottom

For more complex components, you can also combine horizontal and vertical alignment with .topLeading, .topTrailing, .bottomLeadingor alignment ..bottomTrailing.center