EducaSwift

Spacer() is a UI component that "pushes" the resot of the components in order to create a space between them. It can be used horizontally or vertically.

Let's check an example where we show two squares on each side of the screen.

HStack {
    Rectangle()
        .fill(.red)
        .frame(width: 100, height: 100)

    Spacer()

    Rectangle()
        .fill(.blue)
        .frame(width: 100, height: 100)
}

We can use multiple Spacer() and they will take the available space proportionally.

HStack {
	Spacer()

    Rectangle()
        .fill(.red)
        .frame(width: 100, height: 100)

    Spacer()

    Rectangle()
        .fill(.blue)
        .frame(width: 100, height: 100)

    Spacer()
}

Quiz Time!

Next Question

Your Score:

Repeat

Share