SwiftUI | 다양한 정렬 및 레이아웃(HStack / VStack / ZStack)

import SwiftUI

struct CircleView: View {
    let title: String = "MR"
    let message: String = "A multiline description about a feature paired with the image on the left."
    var body: some View {
        
        VStack {
            HStack {
                ZStack {
                    Circle()
                        .fill(.yellow)
                    Text(title)
                }
                Text(message)
            }
            .border(.mint, width: 2)
            .padding(.trailing, 50)
            .border(.black, width: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/)
            
            HStack(alignment: .top) {
                ZStack {
                    Circle()
                        .fill(Color.blue)
                    Text(title)
                }
                .border(.black, width: 2)
                .frame(width: 40)
                .border(.mint, width: 1)
                
                
                Text(message)
            }
            .border(.black, width: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/)
            
            HStack(alignment: .top) {
                ZStack {
                    Circle()
                        .fill(Color.red)
                    Text(title)
                }
                .frame(height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/)

                Text(message)
            }.padding()
            
            HStack(alignment: .top) {
                ZStack {
                    Circle()
                        .fill(Color.green)
                    Text(title)
                }
                .frame(width: 100, height: 40)

                Text(message)
            }
            
            HStack(alignment: .top, spacing: 30) {
                ZStack {
                    Circle()
                        .fill(Color.purple)
                    Text(title)
                }
                .frame(width: 40, height: 40)

                Text(message)
            }
            
            HStack(alignment: .top) {
                ZStack {
                    Circle()
                        .fill(Color.cyan)
                    Text(title)
                }
                .frame(width: 40, height: 40)

                Text(message)
            }
            .padding([.horizontal]) //좌우
            
            HStack(alignment: .top) {
                ZStack {
                    Circle()
                        .fill(Color.brown)
                    Text(title)
                }
                .frame(width: 40, height: 40)

                Text(message)
            }
            .padding([.vertical]) //상하
            
        }
    }
}

#Preview {
    CircleView()
}

 

다양한 스타일링 및 레이아웃 기법을 통해 HStack과 ZStack을 사용하여 뷰를 배치하는 방법을 적용했습니다

각 HStack은 서로 다른 방식으로 원과 텍스트를 정렬하고, 패딩과 테두리 등을 적용하여 다양한 디자인을 시도할 수 있는 방법을 배울 수 있었습니다

이를 통해 SwiftUI를 사용하여 유연하고 복잡한 레이아웃을 구성하는 것을 적용해 보았습니다