---
# System prepended metadata

title: 物件排列方式(VStack、HStack、ZStack)
tags: [基礎語法]

---

# 物件排列方式(VStack、HStack、ZStack)

## 筆記大綱
頁面左邊可以快速查看內容
- VStack 直向排列
- HStack 橫向排列
- ZStack 向上堆疊
<br/>

### VStack 直向排列 [developer.apple.com](https://developer.apple.com/documentation/swiftui/vstack)
只要包含在VStack中的View，就會是直向排列。直接來看簡單範例：
:::info
**範例程式碼**
```swift=
struct ContentView: View{
    var body: some View{
        VStack{
            Text("第一行")
            Text("第二行")
            Text("第三行")
            Text("第四行")
            Text("第五行")
        }
    }
}
```
**虛擬機實際畫面**
Image

:::

而VStack可以結合aligement（對齊方式）和spacing（間隔，單位為px）使用。按照習慣可以有兩種寫法，沒有很大的差別，以自己習慣的閱讀方式為主，讓我們看看範例：
以下範例為VStack置中對齊，每個View間距10px。

```swift=
VStack(aligement: .center, spacing: 10){
    //View
}
```

```swift=
VStack(
    aligement: .center,
    spacing: 10
){
    //View
}
```

:::spoiler {state="open"} VStack中的aligement對齊方式
因爲已經是直向排列了，所以不會有向上對齊或向下對齊（對重疊在一起），因此只有三個：
* .leading 向左對齊
* .center 置中對齊
* .trailing 向右對齊
:::

<br/>

### HStack 橫向排列 [developer.apple.com](https://developer.apple.com/documentation/swiftui/hstack)
只要包含在HStack中的View，就會是橫向排列。直接來看簡單範例：
:::warning
**範例程式碼**
```swift=
struct ContentView: View{
    var body: some View{
        VStack{
            Text("第一列")
            Text("第二列")
            Text("第三列")
            Text("第四列")
            Text("第五列")
        }
    }
}
```
**虛擬機實際畫面**
Image

:::

而HStack同樣可以結合aligement（對齊方式）和spacing（間隔，單位為px）使用。按照習慣可以有兩種寫法，沒有很大的差別，以自己習慣的閱讀方式為主，讓我們看看範例：
以下範例為HStack置中對齊，每個View間距10px。
```swift=
HStack(aligement: .center, spacing: 10){
    //View
}
```

```swift=
HStack(
    aligement: .center,
    spacing: 10
){
    //View
}
```

:::spoiler {state="close"} HStack中的aligement對齊方式
因爲已經是橫向排列了，所以不會有向左對齊或向右對齊（對重疊在一起），因此只有三個：
* .top 向上對齊
* .center 置中對齊
* .bottom 向下對齊
:::

<br/>

### ZStack 向上堆疊 [developer.apple.com](https://developer.apple.com/documentation/swiftui/zstack)
只要包含在ZStack中的View，就會是向上堆疊。行數越小的View會在下面，行數增加，View會像堆疊在上一個View上。直接來看簡單範例：
:::success
**範例程式碼**
```swift=
struct ContentView: View{
    var body: some View{
        VStack{
            Text("這是中文")
            Text("This is English")
            Text("123456789")
        }
    }
}
```
**虛擬機實際畫面**
Image

:::

