SwiftUI 對齊與間距 (Padding & Frame)

學會了 Stack 之後，你需要精確控制 View 的大小與位置。這時候就需要用到 Padding (留白), Spacer (填充空間) 與 Frame (框架尺寸)。

Padding (留白)

.padding() 是最常用的 Modifier 之一，它會在 View 的內容周圍增加空白區域。

Text("Hello")
    .background(.yellow) // 黃色背景緊貼文字
    .padding()           // 增加系統預設的留白
    .background(.blue)   // 藍色背景包含留白區域

指定方向與大小

你可以指定要增加留白的方向 (top, bottom, leading, trailing) 以及具體的數值：

Text("標題")
    .padding(.bottom, 20) // 只在底部增加 20 points
    .padding([.leading, .trailing], 16) // 左右各增加 16 points
    .padding(.horizontal) // 水平方向 (左右) 使用系統預設值

Spacer (填充空間)

Spacer 是一個特殊的 View，它的作用是盡可能地佔據所有剩餘的空間。它在 Stack 排版中非常有用，可以用來推擠其他元件。

將元件推向邊緣

在 HStack 中使用 Spacer：

HStack {
    Text("靠左")
    Spacer() // 佔據中間所有空間
    Text("靠右")
}

在 VStack 中使用 Spacer：

VStack {
    Spacer() // 將內容推到底部
    Text("我在底部")
}

Frame (框架尺寸)

預設情況下，SwiftUI 的 View 只會佔用它內容所需的最小空間。如果你想要強制指定 View 的大小，可以使用 .frame()。

Image("avatar")
    .resizable()
    .frame(width: 50, height: 50) // 指定寬高為 50x50

靈活的 Frame

除了固定數值，你也可以設定最大或最小尺寸，甚至要求它佔滿父容器：

Text("背景全滿")
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 佔滿所有可用空間
    .background(.green)

Alignment (對齊)

當你設定的 Frame 比內容還大時，你可以指定內容在 Frame 裡的對齊方式：

Text("靠左上")
    .frame(width: 200, height: 100, alignment: .topLeading)
    .border(.red)

結合 Padding, Spacer 和 Frame，你就可以隨心所欲地控制畫面上每一個元素的位置了。