Stack

[Jinsujin]

문서 바로가기

• HStack
• VStack
• ZStack

다양한 Stack 을 사용하는 방법들

1. HStack

   HStack(alignment:,spacing:) {
   // 정렬할 하위 views
   }

2. VStack

   VStack(alignment:,spacing:) {
   // 정렬할 하위 views
   }

3. ZStack

   ZStack(alignment:) {
   // 정렬할 하위 views
   }

   • 다른 Stack 과는 달리, spacing 을 조절할 수 없다

알아둘 사항

• Stack 은 subviews 로 10개만 넣을 수 있다.

[Jinsujin]

HStack 의 활용

HStack(alignment: .center, spacing: 10) {
    Text("Text 1")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
    Text("Text 2")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
    Text("Text 3")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
    Text("Text 4")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
}
.padding()
.background(.gray)

[Jinsujin]

VStack 의 활용

VStack(alignment: .center, spacing: 10) {
    Text("Text 1")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
    Text("Text 2")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
    Text("Text 3")
        .bold()
        .cornerRadius(8)
        .padding()
        .background(.orange)
}
.padding()
.frame(width: 300, height: 200, alignment: .leading)
.background(.gray)

[Jinsujin]

ZStack 의 활용

ZStack {
    Color.indigo
    Text("긴 글자")
        .foregroundColor(.gray)
    Button {
        print("touched button!")
    } label: {
        Text("hit me")
            .foregroundColor(.yellow)
            .bold()
            .font(.system(size: 40, weight: .heavy, design: .rounded))
            .padding()
    }
    .background(.pink)
    .cornerRadius(20)

}