Home » Technology » Understanding SwiftUI’s Spacer: Layout and Alternatives

Understanding SwiftUI’s Spacer: Layout and Alternatives

Let’s look at the official documents first

https://developer.apple.com/documentation/swiftui/spacer

Spacer

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.

A view that will extend infinitely will extend infinitely towards the XY axis when placed outside the stack. If placed in the stack, it will extend in the main direction of the stack.

SwiftUI layout: preset

If you want to push it up, add Spacer()

Variation question: Lower right corner?

VStack

Spacer()
HStack

Spacer()
Text(“Hello, world!”).padding().background(Color.red)

How to write without using spacer

You can call it a more concise way of writing

Use Frame to format Text(“Hello, World!”)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
.padding()
.background(Color.red)overlay (only available after iOS15)

overlay official documents Place things in front of the view, similar to ZStack

Color.red.overlay(alignment: .bottomTrailing)
Text(“Hello, World!”).padding()

Here you will find that the Text is completely stretched out and takes up the entire screen, which is different from when it only takes up a small corner of the lower right corner when typesetting with Spacer.

Reference video:https://www.youtube.com/watch?v=qQTTYt9wnFY

The author also mentioned here that this is used in simple situations such as single element. If your screen already uses VStack/HStack, it is reasonable to use Spacer for layout, but if it is just a very simple screen,for typesettingHe felt that it was not necessary to use Stack+Spacer. He could use the two methods above. The writing method is simpler and does not have so many components.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.