8. [SwiftUI] VStack, HStack, ZStack 스택

VStack(수직 스택), HStack(수평 스택), ZStack(앞/뒤 스택)

 

VStack

(H,Z도 유사함)

VStack(alignment: HorizontalAlignment,
	spacing: CGFloat?,
	content: () -> View)
    
// spacing default값은 8, nil 할당 or 지우면 간격 8 적용
// content는 void -> View 함수타입.
/* 클로저 문법 최적화를 통해 
아래와 같은 형태로 많이 쓰는 것임.
VStack {

}
*/

 

 

HStack 예시

 

ZStack 예시 ( .overlay를 떠올려 보자)

 

Stack in Stack in Stack in Stack ... 스택 안에 스택을 쌓으며 무궁무진한 조합을 만들 수 있다.

//  Created by Toughie on 2023/04/03.
//

import SwiftUI

struct Stacks: View {
    var body: some View {
        
        ZStack(alignment: .topLeading) {
            Rectangle()
                .fill(Color.purple)
                .frame(width: 350, height: 500, alignment: .center)
            
            VStack(alignment: .trailing, spacing: 20) {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 80, height: 80)
                Rectangle()
                    .fill(Color.yellow)
                    .frame(width: 100, height: 100)
                
                HStack(alignment: .bottom,spacing: 20) {
                    Rectangle()
                        .fill(Color.pink)
                        .frame(width: 120, height: 120)
                    
                    Rectangle()
                        .fill(Color.orange)
                        .frame(width: 100, height: 100)
                    
                    Rectangle()
                        .fill(Color.cyan)
                        .frame(width: 80, height: 80)
                }
            }
            .background(Color.indigo)
            
        }
        .background(Color.gray)
    }
}

다른 예시들

우측 사진의

1번은 ZStack을 통해 원 위에 텍스트를 올린 것이고,

2번은 Text의 백그라운드를 원(프레임 잡고)으로 한 것이다.

결과는 똑같다.

 

가능하면 ZStack 대신 .background, .overlay를 활용해 보자.

 

ZStack이 나쁘다는 것이 아니라 과도하게 사용하면 문제가 생길 수 있다.

코드가 복잡하고 읽기 어려워질 수 있다.

또한 레이어가 쌓이는 형태이다 보니 의도치 않게 다른 뷰가 가려지는 등 계층화의 문제를 일으킬 수도 있다.

(단순한 뷰라면 스택을 통해 묶기보다는 컴포넌트별 모디파이어를 활용하는 것이 나을 수도 있다는 의미.)