[SwiftUI] VStack 사용 예제

개요

VStack를 통해 수직으로 UI컴포넌트들을 배열해보자.

 

VStack

수직으로 UI 컴포넌트들을 배열한다. 선언된 순서대로 위쪽부터 채워진다.

alignment와 spacing을 설정할 수 있다.

 

alignment는 center, leading, trailing 3가지를 설정할 수 있다.

• center : 가운데 정렬
• leading: 좌측 정렬
• trailing : 우측 정렬

spacing은 컴포넌트간 간격을 설정하는 속성이다.

 

예)

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 20, content: {
            Text("Hello, world!")
                .padding()
            CircleImageView()
                .frame(width: 200, height: 200, alignment: .center)
            RoundedImage()
                .frame(width: 300, height: 300, alignment: .center)
        })
    }
}

이 예제를 보면 Text, CircleImageView, RoundedImage 3개가 순서대로 선언되어 있다. 이렇게 되면 수직으로 선언된 순서대로 화면에 나타나게 된다.

 

참고) CircleImageView, RoundedImage는 이전 포스팅에서 구현한 것을 사용했습니다.

 

위 코드에 대한 미리보기 결과

화면에서 보이듯이 위 코드에서 alignment는 center로 설정하여 각 컴포넌트들이 가운데 정렬이 되어있고, spacing은 10으로 설정하여 각 컴포넌트들을 10의 간격으로 벌어져 있다.

 

마치며

몇줄 안되는 코딩으로 Storyboard의 UIStackView와 같은 VStack을 이용해봤다. 안드로이드의 LinearLayout을 이용하듯이 간단하게 사용할 수 있어 UI 컴포넌트들을 배치하는데 유용하게 사용할 수 있을 것 같다.