SwiftUI 堆疊佈局教學 (Stacks)

在 SwiftUI 中，最基礎也最強大的排版工具就是 Stack (堆疊)。透過組合垂直、水平和深度的堆疊，你可以建構出幾乎任何複雜的介面。

SwiftUI 提供了三種主要的 Stack：

1. VStack (Vertical Stack)：垂直排列
2. HStack (Horizontal Stack)：水平排列
3. ZStack (Depth Stack)：前後層疊 (Z軸方向)

VStack (垂直堆疊)

VStack 會將其子視圖由上而下排列。

VStack {
    Text("標題")
        .font(.title)
    Text("這是副標題")
        .foregroundColor(.gray)
}

對齊與間距 (Alignment & Spacing)

你可以透過參數控制 VStack 內部的對齊方式和子視圖之間的距離：

VStack(alignment: .leading, spacing: 10) {
    Text("靠左對齊")
    Text("間距為 10")
}

• alignment: 預設為 .center (置中)。可選 .leading (靠左), .trailing (靠右)。
• spacing: 預設為系統標準間距 (nil)，設為 0 則無間距。

HStack (水平堆疊)

HStack 會將其子視圖由左而右排列。

HStack(alignment: .bottom, spacing: 20) {
    Image(systemName: "star")
    Text("收藏")
}

• alignment: 垂直方向的對齊。例如 .top, .center, .bottom, .firstTextBaseline。

ZStack (前後堆疊)

ZStack 類似於圖層的概念，後面的 View 會覆蓋在前面的 View 之上。通常用於背景圖或是在圖片上壓文字。

ZStack {
    Color.blue // 底部是整個畫面藍色背景
        .ignoresSafeArea()
        
    Text("我是浮在上面的文字") // 上層文字
        .foregroundColor(.white)
}

• alignment: 控制子視圖在 ZStack 容器內的對齊位置 (共 9 個點，如 .topLeading, .center, .bottomTrailing 等)。

巢狀組合 (Nesting)

最強大的地方在於，Stack 可以無限巢狀組合。例如，要在一個卡片中做佈局：

VStack(alignment: .leading) { // 外層垂直排列
    Image("photo")
        .resizable()
        .aspectRatio(contentMode: .fit)
        
    HStack { // 內部水平排列 (標題 + Spacer + 愛心)
        Text("風景照")
            .font(.headline)
        Spacer() // 撐開空間
        Image(systemName: "heart.fill")
            .foregroundColor(.red)
    }
    .padding()
}
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)

掌握這三種 Stack，你就掌握了 SwiftUI 排版 80% 的功力。