Stack

VStack VS HStack VS ZStack

SwiftUI에서 Stack은  VStack, HStack, ZStack 총 3개가 있다.

VStack은 "Vertical Stack", HStack은 "Horizontal Stack", ZStack은 "Z axis Stack"을 의미한다. (위의 그림참고)

 

각각의 Stack을 다루는 방법을 배워보자.

 

1. VStack

 

[VStack 확인하기]

VStack 내부에 Rectangle() 3개를 추가하면 아래와 같은 화면이 뜬다. 

VStack 내부에 추가했기때무에 수직으로 쌓인다.

 

 

 

[VStack의 속성]

1. VStack의 크기 설정과 백그라운드 설정

 

VStack의 크기는 frame(width: ,height: )를 사용해서 조절할 수 있다. 

.frame(width: ,height: )

 

 

 

2. VStack 내부의 Component의 간격조절

 

현재 VStack 내부에 View 3개가 있다. 이 View의 간격을 조절하려면 어떻게 해야할까?

VStack의 Spacing을 활용하면된다.

VStack(spacing: ) {

}

 

 

 

3. VStack 내부의 Component 정렬 

 

VStack내부에 있는 Component를 좌우, 중앙 정렬을 하려면 어떻게 해야할까? 

VStack의 alignmnet와 Divider를 사용한다.

 

❓Divider: 하나의 Contents와 다른 Contents를 구분하는 뷰입니다. 

 

VStack(alignment: {
	Divider()
}

 

VStack을 잘보면 Divider 때문에 회색의 선이 생긴걸 확인할 수 있는데 이 부분은 opacity를 통해서 없앨 수 있다.

Divider()
	.opacity(0)

 

 

 

 

4. Spacer

 

💡 Spacer: 다른 Object 의 크기에 Priority 를 두고 그 크기가 변하지 않는 선에서 본인의 크기를 최대한으로 늘리고자하는 성질

Spacer는 어떤 Object들 사이에 넣느냐에 따라서 빈공간의 위치가 변경된다. 

Spacer는 중복으로 사용할 수 있어 3분의 1 위치에 두려면 아래와 같이 Spacer를 사용하면된다.

 

그렇다면 Spacer의 크기는 조절 못하는가?

frame으로 조절할 수 있다. 

 

 

 

 

 

---

2. HStack

 

[HStack 확인하기]

HStack 내부에 Rectangle() 3개를 추가하면 아래와 같은 화면이 뜬다. 

HStack 내부에 추가했기때무에 수평으로 쌓인다.

 

 

 

 

[HStack 속성]

 

1. HStack 크기 조절(VStack과 동일)

 

 

 

2. HStack 상하 정렬과 component간의 간격 조절 

 

VStacK과 마찬가지로 Divider와 alignment를 이용해서 정렬을 할 수 있다.

다만, VStack과 다른 점은 VStack은 좌우 정렬이었지만 HStack은 상하 정렬이다.

 

 

 

 

 

---

3. ZStack

 

[ZStack 확인하기]

ZStack은 VIew위에 View가 쌓이는 형식이다. 

 

 

 

 

 

[ZStack 속성]

 

1. Z index 설정하기

 

Z축으로 쌓이는 순서는 index로 설정이 가능하다. 아래 처럼 제일 큰 사이즈의 View를 제일 마지막에 작성하면 아래있는 것들이 가려진다. 따라서 index를 통해서 해당 문제를 해결할 수 있다. (시작은 0부터 시작한다.)

zIndex 적용 전

 

zIndex 적용 후