前面我們學習了如何讓 SwiftUI 畫面可以動態更新，今天主要就是要學習多個 View 複合頁面的呈現，畢竟一個畫面不可能只有一個 View ，而是會由多個 UI 元件組成一個畫面，這就是所謂的排版布局了！如何把畫面上的 UI 元件排的舒適好看，使用者又方便操作，非常考驗 App 工程師的功力，也是開發 App 很專業的一環

而 SwiftUI 核心的布局有三種 VStack、HStack、ZStack，就讓我介紹它們分別是什麼功用

VStack 是什麼

VStack 會讓 UI 元件直直的往下排下去，它是垂直排列的布局

import SwiftUI

struct VerticalStackView: View {
    var body: some View {
        VStack {
            Text("第一個元素")
            Text("第二個元素")
            Text("第三個元素")
        }
    }
}

如上程式碼會呈現垂直排列這三個文字內容，我們也可以替這三個文字內容垂直增加空間，設定如下，就會空出 10 的空間

VStack(spacing: 10) {
    Text("第一個元素")
    Text("第二個元素")
    Text("第三個元素")
}

HStack 是什麼

HStack 是用來水平排列 UI 元件布局，預設會由左往右延伸，程式碼如下

import SwiftUI

struct HorizontalStackView: View {
    var body: some View {
        HStack {
            Text("第一個元素")
            Text("第二個元素")
            Text("第三個元素")
        }
    }
}

ZStack 是什麼

ZStack 會讓 UI 元件都重疊在一起，通常用到的情境比較多是文字疊在圖片上層

struct OverlappingStackView: View {
    var body: some View {
        ZStack {
            Circle()
                .foregroundColor(.blue)
                .frame(width: 100, height: 100)
            Text("在圓形上")
                .foregroundColor(.white)
        }
    }
}

則這裡的範例程式碼我們將一個圓跟文字疊在一起呈現

這三個效果基本上我們都瞭解了，它們能設定的東西也都很簡單，主要可以設定 space，前面有提到是增加空間，另外一個則是 alignment 表示對齊設定

HorizontalAlignment

水平對齊設定分為三種

• .leading 為靠左對齊
• .center 為置中對齊
• .trailing 為靠右對齊

VerticalAlignment

垂直對齊比較多種，共有五個

• .top 向上對齊
• .center 置中對齊
• .bottom 向下對齊
• .firstTextBaseline 確保對齊第一行字
• .lastTextBaseline 確保對齊最後一行字

那你會問 ZStack 用哪種對齊設定？答案是 Alignment ，這個對齊又更多元了，用文字講解有點太冗長抽象，不如來看看官方文件的圖，一目瞭然它的設定

總結

有了這三個 Stack 我們就可以在多個 UI 元件中好好地安排好彼此的位置關係，當然不只這三步局，當然這三個是基本，概念通了其他的就不是太大的問題，當然接下來就不會只是介紹 SwiftUI 了，我們要逐步開始上戰場！意思就是，要開始結合 LeetCode 開始攥寫我們的 App，會邊做邊了解 SwiftUI 知識，那麼就期待明天的相會

• Building layouts with stack views