[SwiftUI] 2. Stack 사용해보기

SwiftUI 에서 3가지의 스택을 사용할 수 있다.

알고리즘을 공부했던 그 스택이 맞다!

수직으로 뷰를 쌓는 VStack

VStack {
            Text("view 1")
            Text("view 2")
            Text("view 3")
        }

수평으로 뷰를 쌓는 HStack

HStack {
            Text("view 1")
            Text("view 2")
            Text("view 3")
        }

 

수직, 수평이 아닌 뷰를 쌓는 ZStack

ZStack {
            Color.yellow.frame(width: 400, height: 400)
            Color.red.frame(width: 300, height: 300)
            Color.blue.frame(width: 200, height: 200)
        }

 

Stack 정렬 및 간격 설정하기

alignment | spacing
alignment 를 통해 정렬을 할 수 있고 spacing 을 통해 간격을 설정할 수 있다.

  VStack(alignment: .leading, spacing: 30) {
            Text("view 1")
            Text("view 2")
            Text("view 3")
        }

Spacer()
간격이 아닌 Text 사이에 공백을 주고 싶다면 Spacer를 사용한다.

VStack(alignment: .leading, spacing: 30) {
            Text("view 1")
            Spacer()
            Text("view 2")
            Text("view 3")
        }

Spacer 의 공백을 조절하고 싶다면 width와 height 옵션을 통해 조절할 수 있다.

VStack(alignment: .leading, spacing: 30) {
            Text("view 1")
            Spacer().frame(height: 5)
            Text("view 2")
            Text("view 3")
        }

 

--- 참고 사이트 ---

medium.com/harrythegreat/swiftui-튜토리얼-3편-스택다루기-e385bff93aa9