SwiftUI 排版神器-Spacer

先來看官方文件

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.

會無限延伸的一個view，放在stack外面會朝XY軸無限延伸。放在stack裡面就會往stack的主要方向延伸。

SwiftUI的排版：預設置中

這是一個垂直排版

預設置中

想要往上推就加Spacer()

上去了☝️

變化題：右下角？

VStack {
    // 先往下推
    Spacer()
    HStack {
      // 再往右推
      Spacer()
      Text("Hello, world!").padding().background(Color.red)
    }
}

出現在右下角了！

不用Spacer的寫法

可以稱他為更簡潔的寫法

1. 使用Frame來排版

Text("Hello, World!")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
.padding()
.background(Color.red)

2. overlay(iOS15以後才有)

overlay官方文件 把東西擺在view的前面，類似ZStack

Color.red.overlay(alignment: .bottomTrailing) {
     Text("Hello, World!").padding()
 } 

右下角!!

這邊會發現Text整個被撐開了，佔滿全螢幕，跟用Spacer排版時只佔右下一小角有差。

參考影片：https://www.youtube.com/watch?v=qQTTYt9wnFY

作者這邊也有提到，這個是用在single element這種簡單的情境。如果你的畫面本來就有用VStack/HStack那用Spacer來排版很合理，但如果只是一個很簡單的畫面，為了排版才特別用Stack+Spacer他覺得沒有必要，可以用上面的兩種方式，寫法比較單純沒那麼多元件。