[swift] ZStack 및 VStack, HStack을 활용한 뷰 배치하기

이번에는 Swift에서 ZStack, VStack 및 HStack을 사용하여 뷰를 배치하는 방법에 대해 알아보겠습니다. 이러한 스택 뷰들을 사용하면 뷰를 수직, 수평 또는 겹쳐서 배치할 수 있어서 화면을 구성하는 데 매우 유용합니다.

1. ZStack

ZStack은 뷰를 겹쳐서 배치할 때 사용됩니다. 백그라운드 뷰가 앞쪽 뷰 위에 있고, 앞쪽 뷰가 뒷쪽 뷰 위에 있습니다. 여기에는 뷰의 중첩이 가능합니다. 아래는 ZStack을 사용한 간단한 예제입니다.

ZStack {
    Rectangle()
        .foregroundColor(.blue)
        .frame(width: 200, height: 200)
    
    Circle()
        .foregroundColor(.yellow)
        .frame(width: 100, height: 100)
}

위 예제에서는 사각형이 원 위에 겹쳐져 보여집니다.

2. VStack

VStack은 뷰를 수직으로 쌓을 때 사용됩니다. 여러 뷰를 수직으로 배열할 때 유용합니다. 다음은 VStack을 사용한 예제입니다.

VStack {
    Text("Hello")
    Text("Swift")
}

위 예제에서 “Hello”가 “Swift” 아래에 나타납니다.

3. HStack

HStack은 뷰를 수평으로 배열할 때 사용됩니다. 다음은 HStack을 사용한 예제입니다.

HStack {
    Text("Hello")
    Text("Swift")
}

위 예제에서 “Hello”와 “Swift”가 가로로 나란히 표시됩니다.

ZStack, VStack, HStack을 활용하면 더 복잡한 레이아웃을 만들 수 있습니다. 이러한 스택 뷰들을 조합하여 다양한 디자인을 만들어보세요!

위에서 제시된 예제는 간단한 예제이며, 실제 앱에서는 다양한 속성 및 기능을 활용하여 더 다채로운 디자인을 구현할 수 있습니다.

더 많은 정보를 찾으시려면 SwiftUI 공식 문서를 참고하세요.