View를 나열하는 방법응 구분해주는 Stack은 종류가 3가지가 있습니다.
struct ContentView: View {
var body: some View {
VStack(alignment: .center, spacing: 14){
Text("Hello")
Text("How are you?")
Text("oh!")
}.background(Color.mint)
}
}
수직으로 View가 쌓이는 것입니다.
struct ContentView: View {
var body: some View {
HStack(alignment: .center, spacing: 14){
Text("Hello")
Text("How are you?")
Text("oh!")
}.background(Color.mint)
}
}
수평으로 View가 쌓이는 것입니다.
struct ContentView: View {
var body: some View {
ZStack{
Text("Hello")
Text("How are you?")
Text("oh!")
}.background(Color.mint)
}
}
View가 겹쳐져서 나오는 것입니다.
이러한 Stack을 사용할 때에는 주의해야 할 경우가 있습니다.
바로 Stack 안에서 사용되는 View의 갯수가 10개 이상일 경우 에러를 발생하기 때문입니다.
이러한 경우를 방지하기 위해서 사용하는 것이 바로 Group
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 10){
Text("1")
Text("2")
Text("3")
Text("4")
Text("5")
Text("6")
Text("7")
Text("8")
Text("9")
Text("10")
Text("11") //error 발생
}.background(Color.mint)
}
}
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 10){
Text("1")
Text("2")
Text("3")
Text("4")
Group{
Text("5")
Text("6")
Text("7")
Text("8")
Text("9")
Text("10")
Text("11")
}
Text("12")
Text("13")
}.background(Color.mint)
}
}
Group으로 묶인 부분을 하나의 View로 인식됩니다.
현재 코드에서는 Stack 안에 7개의 View가 존재하는 것으로 인식됩니다.