How to create stacks using VStack and HStack

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-stacks-using-vstack-and-hstack]

 

How to create stacks using VStack and HStack

[동영상 강좌 : https://youtu.be/iO7bcgjXZRI]

SwiftUI 컨텐츠 뷰는 반드시 보여주길 원하는 하나의 뷰를 반환해야 합니다. 한번에 화면에서 하나 이상의 뷰를 보고자 할때 SwiftUI에게 그것들을 정렬하는 방법을 알려줘야 하고 그것은 스택(stacks)에 들어갑니다.

 

스택(Stacks)(UIStackView와 동일)은 3가지 형태가 있습니다: 수평(Stack), 수직(VStack), 깊이기반(ZStack), 자식 뷰들과 겹치도록 배치하고자 하는 경우에는 후자가 사용됩니다. 

 

간단한 것부터 시작해 봅시다. 다음은 하나의 텍스트 뷰입니다.

Text("SwiftUI")

 

아래에 또 다른 것을 배치하고자 하는 경우, 다음과 같이 작성할 수 없습니다.

var body: some View {
    Text("SwiftUI")
    Text("rocks")
}

 

정확히 하나의 View를 반환해야 하는 것을 기억하므로, 그 코드는 동작하지 않습니다.

 

대신에, 수직 스택안에 배치함으로써 텍스트 뷰들이 서로 위로 배치됩니다.

VStack {
    Text("SwiftUI")
    Text("rocks")
}

 

수직 스택이 화면의 중앙에 배치되는 것을 알게 될 것이며, 해당 라벨 또한 중앙에 있을것이고 그것들 간에 자동으로 간격이 생깁니다. 

 

라벨들을 수평으로 나란히 두고자 하는 경우, 다음과 같이 VStack을 HStack로 교체하세요.

HStack {
    Text("SwiftUI")
    Text("rocks")
}