Skip to main content

HStack、VStack、ZStack 介紹

在 SwiftUI 中，Stack 是佈局的核心組件，用來組織和排列子視圖。主要有三種類型：

HStack (水平堆疊)​

HStack 將子視圖水平排列，從左到右。

基本語法​

HStack {
    Text("左邊")
    Text("中間")
    Text("右邊")
}

常用參數​

HStack(alignment: .center, spacing: 10) {
    // 子視圖
}
  • alignment: 垂直對齊方式 (.top, .center, .bottom)
  • spacing: 子視圖之間的間距

實際範例​

HStack(spacing: 20) {
    Image(systemName: "star.fill")
        .foregroundColor(.yellow)
    Text("評分")
    Text("4.5")
        .fontWeight(.bold)
}

VStack (垂直堆疊)​

VStack 將子視圖垂直排列，從上到下。

基本語法​

VStack {
    Text("上方")
    Text("中間")
    Text("下方")
}

常用參數​

VStack(alignment: .leading, spacing: 15) {
    // 子視圖
}
  • alignment: 水平對齊方式 (.leading, .center, .trailing)
  • spacing: 子視圖之間的間距

實際範例​

VStack(alignment: .leading, spacing: 10) {
    Text("商品名稱")
        .font(.title2)
        .fontWeight(.bold)
    Text("商品描述")
        .font(.body)
        .foregroundColor(.secondary)
    Text("NT$ 1,200")
        .font(.title3)
        .foregroundColor(.red)
}

ZStack (層疊堆疊)​

ZStack 將子視圖層疊在一起，後面的視圖會覆蓋前面的視圖。

基本語法​

ZStack {
    Rectangle()
        .fill(Color.blue)
    Text("覆蓋文字")
        .foregroundColor(.white)
}

常用參數​

ZStack(alignment: .center) {
    // 子視圖
}
  • alignment: 對齊方式 (.topLeading, .center, .bottomTrailing 等)

實際範例​

ZStack {
    // 背景圖片
    Image("background")
        .resizable()
        .aspectRatio(contentMode: .fill)

    // 半透明遮罩
    Rectangle()
        .fill(Color.black.opacity(0.3))

    // 前景內容
    VStack {
        Text("標題")
            .font(.largeTitle)
            .foregroundColor(.white)
        Text("副標題")
            .foregroundColor(.white)
    }
}

組合使用​

巢狀 Stack​

VStack {
    HStack {
        Text("左側")
        Spacer()
        Text("右側")
    }

    HStack {
        VStack {
            Text("左上")
            Text("左下")
        }
        VStack {
            Text("右上")
            Text("右下")
        }
    }
}

複雜佈局範例​

VStack(spacing: 20) {
    // 標題區域
    HStack {
        Text("我的應用")
            .font(.largeTitle)
            .fontWeight(.bold)
        Spacer()
        Button("設定") {
            // 設定動作
        }
    }

    // 內容區域
    ZStack {
        RoundedRectangle(cornerRadius: 15)
            .fill(Color.gray.opacity(0.1))

        VStack(spacing: 15) {
            Image(systemName: "person.circle.fill")
                .font(.system(size: 60))
                .foregroundColor(.blue)

            Text("使用者名稱")
                .font(.title2)
                .fontWeight(.semibold)

            Text("歡迎回來！")
                .foregroundColor(.secondary)
        }
    }
    .frame(height: 200)
}
.padding()

常用修飾符​

Spacer​

HStack {
    Text("左邊")
    Spacer() // 佔滿剩餘空間
    Text("右邊")
}

Divider​

VStack {
    Text("上方內容")
    Divider() // 分隔線
    Text("下方內容")
}

對齊方式​

HStack(alignment: .top) {
    Text("短文字")
    Text("這是一段比較長的文字內容，用來測試對齊效果")
}

最佳實踐​

  1. 合理使用 spacing: 保持一致的間距讓介面更整潔
  2. 適當的巢狀: 避免過深的巢狀結構，保持程式碼可讀性
  3. 對齊方式: 根據設計需求選擇合適的對齊方式
  4. Spacer 使用: 善用 Spacer 來分配空間
  5. 效能考量: 避免在 Stack 中放置過多複雜的視圖

總結​

  • HStack: 水平排列，適合橫向佈局
  • VStack: 垂直排列，適合縱向佈局
  • ZStack: 層疊排列，適合覆蓋效果
  • 三種 Stack 可以靈活組合使用，創造複雜的介面佈局