SwiftUI - Container Views (VStack, HStack)

컨테이너 뷰 (Container Views)

- 사용자 인터페이스(UI) 요소들을 그룹화하고 배치하는 데 사용되는 SwiftUI의 기능 

- 하위 뷸들을 묶어 하나의 단위로 다룰 수 있도록 도와주어 UI를 구조적이고 조직적으로 만드는 역할을 함

- 종류 (VStack, HStack, ZStack, List, ScrollVIew, Group 등) 

 

 

 

 

 

VStack (Vertical Stack)

- 하위 뷰들을 수직으로 쌓아 올림

- 위에서 아래로 배치

 

- VStack : 하위 뷰들을 수직으로 쌓음

- alignment 파라미터 : '.leading' 을 사용하여 좌츨 정렬 

- spacing 파라미터 : 각 요소들 간의 수직 간격 (패딩)을 50으로 지정 

- "VStack" 라는 텍스트와 3개의 사각형 표시 

- VStack에 대한 설정으로 VStack의 폭을 300으로 지정하고 배경색을 노란색으로 지정 

 

VStack의 파라미터로 'alignment : .leading' 을 사용했지만 요소들 기준 왼쪽에 정렬될 뿐 VStack의 왼쪽으로 정렬되지 않음 

→ 'Divider()' 사용 

 

 

VStack(alignment: .leading, spacing: 50){
            
            // 공간을 만드는 Divider
            Divider().opacity(0)
            
            Text("VStack")
                .font(.system(size: 20))
                .fontWeight(.bold)
    
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.green)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.blue)
        }

- 'Divider()' : SwiftUI에서 수평 구분선을 만드는 뷰 → 수평적인 선 생성 

- Divider를 사용하여 수평 공간을 만들고 수평선을 보이지 않게 하기 위해 투명도(opacity)를 0으로 설정 

 

 

 

 

---

HStack (Horizontal Stack)

- 뷰를 수평을 배치하는 컨테이너 뷰 

 

- HStack 내부에 포함된 뷰들은 왼쪽에서 오른쪽으로 순서대로 배치

- HStack 내부에 VStack을 추가 가능

- HStack의 배경색상을 지정하려면 'background' modifier를 사용하여 Color 지정 가능 

 

 

 

 

참고)

https://www.youtube.com/watch?v=becPe413CH4 

https://babbab2.tistory.com/160

SwiftUI) Stack을 알아보자(HStack / VStack / ZStack)