SwiftUI 레이아웃 컴포넌트

HStack {
    VStack(spacing: 4) {
        Text("foo")
        Text("bar")
    }

    VStack(alignment: .leading) {
        ...
    }
}

HStack의 경우 베이스 라인의 기준을 정할 수도 있다.

HStack(alignment: .lastTextBaseline) {
    Text("caption").font(.caption)
    Image("20x20")
    Text("Title")
}

위 코드는 마지막 텍스트의 하단을 기준으로 베이스 라인을 맞춰준다.

HStack 의 경우 오른쪽에서 왼쪽으로 읽는 문자 표시 시에는 순서를 알아서 반대로 표시해 주는 듯 하다.

ZStack은 UI를 바닥부터 쌓아 가는 형태로 만들 때 사용한다. 대충 쌓기를 하고 있는데 위에서 쳐다본다고 생각하면 될 것 같다.

ZStack {
    ForEach(...) {
        ...
    }
}

앞서 언급된 VStack 과 HStack 이름 앞에 Lazy 가 붙어있는데 기능은 동일하지만 필요할 때만 동작하는 그런 레이아웃 컴포넌트다.

예를 들자면 아래와 같은 식으로 가로 방향 리스트 모양을 구현할 수 있다.

ScrollView(.horizontal) {
    LazyHStack {
        View1
        View2
        View3
        ...
    }
}

LazyVStack, LazyHStack 등은 필요할 때 뷰를 생성하기 때문에 메모리 관리에 비교적 효율적인 편이다.

플렉시블한 공백이다. 컴포넌트와 컴포넌트 사이에 가능한 최대한의 공간을 넣는데 사용한다.

Spacer()

ViewThatFits 는 크기가 동적으로 변할 수 있는 경우 적절한 View를 자동으로 골라서 보여주는 기능을 제공한다.

ViewThatFits {
    Text("Very Long Long Text")
    Text("Long Text")
    Text("Text")
}

위의 경우 세 가지 Text 중에 가장 최적으로 표시될 수 있는 View가 화면에 표시된다.

iOS 16부터 사용할 수 있다.