# 物件排列方式(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
:::
{"title":"物件排列方式(VStack、HStack、ZStack)","description":"VStack 直向排列","contributors":"[{\"id\":\"57943794-cfe8-43f8-bb68-956a9c60e610\",\"add\":2366,\"del\":269}]"}