Stack View들은 기본 컨테이너 뷰들로 복잡한 레이아웃을 구성할 수 있게 도와준다.

Stacks

VStack, HStack

수직(VStack) 및 수평(HStack)으로 뷰를 담고 있는 스택 뷰

• 하위 뷰의 화면 표시 여부에 상관 없이 모든 하위 뷰를 한 번에 렌더링
• 하위 뷰의 개수가 적을 때 사용
• 하위 뷰의 개수가 많다면 최적화에 불리하므로 이 때 LazyStack 을 사용

LazyVStack, LazyHStack

VStack, HStack과 마찬가지로 수직 및 수평으로 뷰를 담고 있는 스택 뷰

• Lazy 키워드에 맞게, 하위 뷰가 화면에 표시되어야 할 때 뷰를 렌더링
• 사용해본 결과 일반 Stack과는 다르게 자동으로 화면의 width 또는 height에 맞게 크기를 조정하는 듯 하다.

ZStack

하위 뷰들을 겹쳐서 정렬하는 스택 뷰

• 하위 뷰들을 쌓아서 정렬
• 맨 처음 추가된 뷰가 가장 아래, 마지막에 추가된 뷰가 가장 위에 존재

Positioning

Alignment

UIKit의 UIStackView처럼 alignment 속성이 존재

VStack(alignment: .leading) { ... }
// .leading, .center, .trailing

HStack(alignment: .center) { ... }
// .top, .center, .bottom, .firstTextBaseline, .lastTextBaseline

ZStack(alignment: .top) { ... }
// .topLeading, .top, .topTrailing
// .leading, .center, .trailing
// .bottomLeading, .bottom, .bottomTrailing

Spacer

Spacer은 스택의 하위 뷰 사이에 공간을 추가하는 역할
(UIToolbar의 flexibleSpace() 같은 역할인 듯 하다)

• 사용 가능한 공간을 모두 채우고, 다른 뷰 또는 스택의 가장자리에서 뷰를 밀어냄

Divider

Divider 또한 스택의 하위 뷰 사이에 공간을 추가

사용 가능한 공간을 모두 밀어내지 않고, 선을 그을 수 있을 정도의 공간만을 추가

선은 스택의 축(VStack -> vertical, ...)의 반대 방향(90도)으로 그어짐

Overlay, Background

ZStack을 사용하지 않고 뷰를 앞뒤로 배치할 때 유용

• overlay(alignment:content:), background(alignment:content:)을 사용
  • overlay(alignment:content:) 수정자를 추가하여 해당 뷰 앞에 content로 전달된 뷰를 표시 가능
  • background(alignment:content:) 수정자를 추가하여 해당 뷰 뒤에 content로 전달된 뷰를 표시 가능

Create Adaptive Layouts Instead of Explicit Layouts

가능한 경우 frame을 명시적으로 배치하지 않고 구조와 계층을 정의해야 한다.

• 다른 장치 또는 플랫폼에 대응하기 쉽다
• frame(width:height:alignment:) 또는 position(x:y:)는 적응적이고 유연한 방법으로 사용할 수 없을 때만 사용